HTML/JavaScript: Почему мои кнопки не работают?

Question

Я написал код для слайд-шоу из 5 изображений, и кнопки NEXT и ПРЕДЫДУЩИЕ должны довести вас до следующего и предыдущего слайдов, но ничего не происходит, когда я их нажимаю. Может кто-нибудь мне помочь? некоторые более подробно еще некоторые детали еще некоторые детали еще некоторые детали

var slideShow = []; 
 

 
function newImage(source, caption) { 
 
    var pic = new Object(); 
 
    pic.src = source; 
 
    pic.cap = caption; 
 
    return pic; 
 
} 
 

 
slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat"); 
 
slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat"); 
 
slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat"); 
 
slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits "); 
 
slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage"); 
 

 
var i = 0; 
 

 
function nextPic() { 
 
    i = (i + 1); 
 
    if (i == 5) 
 
    i = 0; 
 
    document.getElementById("picture").innerHTML = '<img src= ' + 
 
    slideshow[i].src + ' id="images" height="100%"' + 
 
    ' alt="my picture"> <p>' + slideshow[i].cap + '</p>'; 
 
} 
 

 
function prevPic() { 
 
    if (i == -1) 
 
    i = 4; 
 
    else 
 
    i = (i - 1); 
 
    document.getElementById("picture").innerHTML = '<img src= ' + 
 
    slideshow[i].src + ' id="images" height="100%"' + 
 
    ' alt="my picture"> <p>' + slideshow[i].cap + '</p>'; 
 
}

#picture { 
 
    width: 200px; 
 
    margin-left: 50; 
 
    margin-right: auto; 
 
} 
 
div.buttons { 
 
    width: 200px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
div.info { 
 
    width: 500px; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border: 3px solid purple; 
 
} 
 
button { 
 
    font-size: 12px; 
 
} 
 
button.left { 
 
    auto; 
 
    margin-right: 418px; 
 
} 
 
p { 
 
    text-align: center; 
 
}

<h3>Project 2: Slide Show</h3> 
 
<h4>I do not own any of the following pictures</h6> 
 
<h4>All pictures acquired online, unknown owners</h4> 
 

 
<br /> 
 

 
<div id="picture"> 
 
    <img src="slideshow1.jpg" id="images" alt="my picture" height="200 px"> 
 
    <p>The Happy Cat</p> 
 
</div> 
 

 
<div class="buttons"> 
 
    <button class="left" onClick="prevPic()">PREVIOUS</button> 
 
    <button onClick="nextPic()">NEXT</button> 
 
</div>

Answer 1

1) Опечатка в слайд-шоу

2) Не связаны, но вы не можете иметь дубликат идентификатор вместо этого использовать класс

  var slideshow = []; 
 

 

 
      function newImage(source, caption) { 
 
       var pic = new Object(); 
 
       pic.src = source; 
 
       pic.cap = caption; 
 
       return pic; 
 
      } 
 

 
      slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat"); 
 
      slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat"); 
 
      slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat"); 
 
      slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits "); 
 
      slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage"); 
 

 
      var i = 0; 
 

 
      function nextPic() { 
 
       i = (i + 1); 
 

 
       if (i == 5) 
 
       i = 0; 
 
       document.getElementById("picture").innerHTML = '<img src= ' + 
 
       slideshow[i].src + ' class="images" height="100%"' + 
 
       ' alt="my picture"> <p>' + slideshow[i].cap + '</p>'; 
 
      } 
 

 

 
      function prevPic() { 
 
       if (i == -1) 
 
       i = 4; 
 
       else 
 
       i = (i - 1); 
 

 
       document.getElementById("picture").innerHTML = '<img src= ' + 
 
       slideshow[i].src + ' class="images" height="100%"' + 
 
       ' alt="my picture"> <p>' + slideshow[i].cap + '</p>'; 
 
      }

<h3> Project 2: Slide Show </h3> 
 
<h4> I do not own any of the following pictures </h6> 
 
      <h4> All pictures acquired online, unknown owners </h4> 
 

 

 
<br /> 
 

 
<div id="picture"> 
 
    <img src="slideshow1.jpg" class="images" alt="my picture" height="200 px"> 
 
    <p>The Happy Cat</p> 
 
</div> 
 

 

 
<div class="buttons"> 
 
    <button class="left" onClick="prevPic()">PREVIOUS</button> 
 
    <button onClick="nextPic()">NEXT</button> 
 
</div>

Answer 2

Вы объявляя var slideShow = []; массив, однако позже вы заселение slideshow с кодом:

slideshow[0] = newImage("slideshow1.jpg","The Happy Cat"); 

который выбрасывает ReferenceError, потому что вы не можете установить свойство undefined.

Answer 3

Использовать обычные var slideshow = [] вместо var slideShow = []