Try to search your question here, if you can't find : Ask Any Question Now ?

Cannot read property 'length' of null javascript

HomeCategory: stackoverflowCannot read property 'length' of null javascript
Avatarpragati asked 3 months ago

I’m trying to implement a slideshow feature (using W3schools howto) into a web page however I keep getting the error “Cannot read property ‘length’ of null javascript” at line 3 and 22 of my code.

I’ve tried implementing a check for if(slides.length!=0 null) on line 21 but that doesn’t seem to solve the issue. My question is how do I get the slideshow up and running?

JS

//Home Page Slides
var j=1; //The index of the slides
showSlides(j);

//Next/Prev controls
function plusSlides(n)
{
  showSlides(j+=n);
}
//Thumbnail image controls
function currentSlide(n)
{
  showSlides(j=n);
}
//Main function defenition
function showSlides(n)
{
  var i;
  slides=document.getElementById("homeSlides");
  var dots=document.getElementById("dot");
  //if(slides.length!=null)
    if(n>slides.length)
    {
      j=1
    }
    if(n<1)
    {
      j=slides.length
    }
    for(i=0;i<dots.length;i++)
    {
      dots[i].className=dots[i].className.replace(" active,","");
    }
    slides[j-1].style.display="block";
    dots[j-1].className+="active";
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Art Block 51 Home Page</title>
  <link rel="stylesheet"  href="ArtBlock51.css">
  <script src="ArtBlock51.js"></script>
</head>
<body>
<div>
  <header>
    <section id="topOfPageColor">
      <h1 class="pageBannerText" style="font-family:cambria;">Art Block 51</h1>
      <nav>
        <a href="ArtBlock51.html" class="navigationButton homePageButton">Home</a>
        <a href="ArtBlock51_Products.html" class="navigationButton productsPageButton">Products</a>
        <a href="ArtBlock51_ContactUs.html" class="navigationButton contactUsPageButton">Contact Us</a>
        <a href="ArtBlock51_Cart.html" class="navigationButton CartPageButton">Cart</a>
      </nav>
    </section>
  </header>
</div>
<!--The slideshow container and images-->
<div class="slideshowContainer">

  <div class="homeSlides fade">
    <img src="images/test1.jpg" style="width:100%">
  </div>

  <div class="homeSlides fade">
    <img src="images/test2.jpg" style="width:100%">
  </div>

  <div class="homeSlides fade">
    <img src="images/test3.jpg" style="width:100%">
  </div>

</div>
<br>
<!--Dot buttons-->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

<div>
  <section id="bottomofPageColor">
  </section>
</div>

</body>
</html>

CSS

.navigationButton
{
  background:#78bfa2;
  border:none;
  color:white;
  padding:15px 32px;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  font-size:20px;
  margin:4px 2px;
  cursor:pointer;
}
.pageBannerText
{
  position: absolute;
  left:500px;
  color:white;
  font-size:40px;
}
.homePageButton
{
  position:absolute;
  left: 500px;
  top:100px;
}
.productsPageButton
{
  position:absolute;
  left: 620px;
  top: 100px;
}
.contactUsPageButton
{
  position:absolute;
  left:760px;
  top:100px;
}
.CartPageButton
{
  position:absolute;
  left:920px;
  top:100px;
}
#topOfPageColor
{
  background-color:#6fb79a;
  height:22%;
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
#bottomofPageColor
{
  background-color:#6fb79a;
  height:10%;
  position:absolute;
  top:100;
  left:0;
  bottom:0;
  width:100%;
}
/*.scrollBar
{
  background-color:white;
  height:100%;
  width:100%;
  overflow-y:scroll;
}*/

/*Including padding and border in all the elements total width and height*/
*{box-sizing:border-box}

.slideshowContainer
{
  max-width:1000px;
  position:relative;
  margin:auto;
}
/*Hide images my default*/
.homeSlides
{
  display:none;
}
/*The dots*/
.dots
{
  cursor:pointer;
  height:15px;
  width:15px;
  margin:0 2px;
  background-color:#bbb;
  border-radius:50%;
  display:inline-block;
  transition:background-color 0.6s ease;
}
.active, .dot:hover
{
  background-color:#717171;
}
/*Fading animation*/
.fade
{
  -webkit-animation-name:fade;
  -webkit-animation-duration:1.5s;
  animation-name:fade;
  animation-duration:1.5s;
}
/*Animation of the opacity utilizing key frames*/
@-webkit-keyframes fade
{
  from{opacity:.4}
  to{opacity:1}
}
@keyframes fade
{
  from{opacity:.4}
  to{opacity:1}
}
1 Answers
Best Answer
AvatarAmit answered 3 months ago
Your Answer

4 + 12 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com