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>EDIT: Currently I am working only on "next" button, so the previous one is not working, yet.
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.
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>