Невозможно прочитать свойство 'длина' нулевого JavaScript - PullRequest
Новая
       21

Невозможно прочитать свойство 'длина' нулевого JavaScript

0 голосов
/ 14 марта 2019

Я пытаюсь внедрить функцию слайд-шоу (используя руководство W3schools) на веб-страницу.Тем не менее, я получаю сообщение об ошибке « Невозможно прочитать свойство« length »нулевого JavaScript» в строках 3 и 22 моего кода.

Я пытался реализовать проверку для if (слайды.length! = 0 null) в строке 21, но это, похоже, не решает проблему.У меня вопрос, как мне запустить и запустить слайдшоу?

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" type="text/css" 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}
}

Ответы [ 3 ]

0 голосов
/ 14 марта 2019

Я даю вам подсказку заменить slides=document.getElementById("homeSlides"); на slides=document.getElementsByClassName("homeSlides");

0 голосов
/ 14 марта 2019

slides=document.getElementById("homeSlides"); - для получения идентификатора.но твой homeSlides это класс.измените это на id следующим образом: 

<div id="homeSlides fade">

, и это будет работать.

0 голосов
/ 14 марта 2019

Переменная слайды не определена, поэтому вы не можете назвать длину для нее. Так что, если проверка должна быть: 

//Checks if slides is null
if(slide){
    ...
}

Причина, по которой слайды не определены, заключается в том, что ваш HTML не содержит элемента с идентификатором "homeSlides", поэтому document.getElementById ("homeSlides") ничего не возвращает.

Я думаю, что функция, которую вы хотите вызвать: document.getElementsByClassName("homeSlides"); Это вернет все элементы с классом "homeSlides"

...