I have this little website I am currently working on and what I want to do is navigating my divs through Previous/Next buttons. I managed to make it switch from one to another but somehow third div gets ignored and I don't know what I am missing.

Here's my snippet code:

      var nextbtn = document.getElementById("next-btn");
      var previousbtn = document.getElementById("previous-btn");
      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");
      var div3 = document.getElementById("div3");
      
      var i = 0;
      nextbtn.addEventListener("click", function () {
        i  ;
        if (i == 1) {
          div1.style.display = "block";
          div2.style.display = "none";
          div3.style.display = "none";
        } else if (i == 2) {
          div1.style.display = "none";
          div2.style.display = "block";
          div3.style.display = "none";
        } else if (i == 3) {
          div1.style.display = "none";
          div2.style.display = "none";
          div3.style.display = "block";
        } else {
          console.log("you have reached the limit");
        }
      });

    body {
      display: flex;
      flex-wrap: wrap;
    }
    .div1,
    .div2,
    .div3 {
      width: 200px;
      height: 200px;
    }
    .div1 {
      display: block;
    }
    .div2,
    .div3 {
      display: none;
    }

    <div class="div1" id="div1" style="background-color: crimson">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="div2" id="div2" style="background-color: rgb(20, 220, 87)">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="div3" id="div3" style="background-color: rgb(113, 20, 220)">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="buttons-controller">
      <button id="first-div">1</button>
      <button id="second-div">2</button>
      <button id="third-div">3</button>
    </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

EDIT: Currently I am working only on "next" button, so the previous one is not working, yet.

CodePudding user response：

You cannot have more than one element with same id, that was the reason it was not working.

var nextbtn = document.getElementById("next-btn");
var previousbtn = document.getElementById("previous-btn");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

var i = 0;
nextbtn.addEventListener("click", function() {
  i  ;
  if (i == 1) {
    div1.style.display = "none";
    div2.style.display = "block";
    div3.style.display = "none";
  } else if (i == 2) {
    div1.style.display = "none";
    div2.style.display = "none";
    div3.style.display = "block";
  }  else {
    console.log("you have reached the limit");
  }
});

body {
  display: flex;
  flex-wrap: wrap;
}

.div1,
.div2,
.div3 {
  width: 200px;
  height: 200px;
}

.div1 {
  display: block;
}

.div2,
.div3 {
  display: none;
}

<div class="div1" id="div1" style="background-color: crimson">
</div>

<div class="div2" id="div2" style="background-color: rgb(20, 220, 87)">
</div>

<div class="div3" id="div3" style="background-color: rgb(113, 20, 220)">
</div>

<div class="buttons-controller">
  <button id="previous-btn">previous</button>
  <button id="next-btn">next</button>
  <button id="first-div">1</button>
  <button id="second-div">2</button>
  <button id="third-div">3</button>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You are selecting the next button by id, yet there are multiple next buttons on the page - so only the one in div1 gets selected.

Ids in a document are meant to be unique, you can read more about this here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

Select the button by class with something like document.querySelector('.next-button') and you should be able to handle the click in div2 as well.

Also make sure to initialize i to 1 as it would otherwise take two clicks to get to div2.