Не удается прочитать свойство 'length' нулевого javascript

ProgramBox

Не удается прочитать свойство ‘length’ нулевого javascript

Post author:admin
Запись опубликована:15 мая, 2023
Post category:Вопросы по программированию

#javascript #html #css #slideshow #variable-length

#javascript #HTML #css #слайд-шоу #переменная длина

Вопрос:

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

Я попытался реализовать проверку if (слайды.длина!=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}
}

1. в вашем HTML-файле нет элемента с id of homeSlides , и вы используете это имя класса вместо id.

2. У вас нет идентификаторов, объявленных ни для dot, ни для homeSlides. Они оба являются классами.

3. У вас нет элемента DOM с идентификатором homeSlides…

4. Кроме того, gEBI возвращает один элемент, а элементы DOM редко реализуют length свойство.

Ответ №1:

Переменная slides не определена, поэтому вы не можете вызвать length для нее. Итак, ваша проверка if должна быть:

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

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

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

1. Я изменил фрагмент на document.getElementsByClassName("homeSlides"); , который, похоже, сработал, однако теперь я получаю сообщение об ошибке «Не удается прочитать свойство ‘style’ неопределенного» в строках 3 и 35 в файле js

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

Ответ №2:

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

Ответ №3:

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

 <div id="homeSlides fade">

и это сработает.