title: Next/prev button for modal with Javascript
body: <p>I have been trying to make modal for a custom site I'm building. Everything seemed to go fine. It displayed whichever picture I clicked on and &quot;previous&quot; button works as intended. However, there seems to be a problem with &quot;next&quot; button because it behaves differently depending on which picture I'm currently on. Sometimes it jumps by few indexes forward or even backwards. Some insight would be appreciated. Thanks in advance. Here is a code HTML:</p>
  <pre><code>&lt;div id=&quot;modalcontainer&quot; class=&quot;displaynone&quot;&gt;
      &lt;h4&gt;
          &lt;span id=&quot;close&quot;&gt;X&lt;/span&gt;
      &lt;/h4&gt;
      &lt;img src=&quot;&quot; alt=&quot;&quot; id=&quot;modalcontent&quot;&gt;
      &lt;div class=&quot;buttoncontainer&quot;&gt;
          &lt;div class=&quot;previous&quot;&gt;
              &lt;span id=&quot;prev&quot;&gt;&amp;lt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class=&quot;next&quot;&gt;
              &lt;span id=&quot;next&quot;&gt;&amp;gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=&quot;imgcontainer&quot;&gt;
      &lt;img src=&quot;images/1.JPG&quot; alt=&quot;&quot;&gt;
      &lt;img src=&quot;images/2.JPG&quot; alt=&quot;&quot;&gt;
      &lt;img src=&quot;images/3.JPG&quot; alt=&quot;&quot;&gt;
      &lt;img src=&quot;images/4.JPG&quot; alt=&quot;&quot;&gt;
      &lt;img src=&quot;images/8.png&quot; alt=&quot;&quot;&gt;
      &lt;img src=&quot;images/9.jpg&quot; alt=&quot;&quot;&gt;
      &lt;img src=&quot;images/10.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And JS:</p>
  <pre><code>const modalContainer = document.getElementById(&quot;modalcontainer&quot;);
  const prevButton = document.getElementById(&quot;prev&quot;);
  const nextButton = document.getElementById(&quot;next&quot;);
  const closeModal = document.getElementById(&quot;close&quot;);
  const modalContent = document.getElementById(&quot;modalcontent&quot;);
  const imgContainer = document.getElementById(&quot;imgcontainer&quot;);
  let containerImages = imgContainer.querySelectorAll(&quot;img&quot;);
  let imgIndex = 0;
  
  
  
  containerImages.forEach(function(img){
      img.setAttribute(&quot;data-index&quot;, imgIndex++);
      img.addEventListener(&quot;click&quot;, () =&gt; {
          if(modalContainer.classList.contains(&quot;displaynone&quot;)){
              modalContainer.classList.remove(&quot;displaynone&quot;);
              modalContainer.classList.add(&quot;displaymodal&quot;);
              modalContent.src = img.src;
             
          };
              imgIndex = img.dataset.index;
              console.log(imgIndex);
      });
  });
  
  closeModal.addEventListener(&quot;click&quot;, () =&gt; {
      if(modalContainer.classList.contains(&quot;displaymodal&quot;)){
          modalContainer.classList.remove(&quot;displaymodal&quot;);
          modalContainer.classList.add(&quot;displaynone&quot;);
      }
      imgIndex = 0;
  });
  
  nextButton.addEventListener(&quot;click&quot;, () =&gt; {
      imgIndex = (imgIndex += 1) % containerImages.length;
      modalContent.src = containerImages[imgIndex].src;
      console.log(imgIndex);
  });
  
  prevButton.addEventListener(&quot;click&quot;, () =&gt; {
      imgIndex = (imgIndex -= 1);
      if (imgIndex &lt; 0) {
      imgIndex = containerImages.length - 1;
      console.log(imgIndex);
      };
      modalContent.src = containerImages[imgIndex].src;
      console.log(imgIndex);
  });
  </code></pre>