Tengo este pequeño sitio web en el que estoy trabajando actualmente y lo que quiero hacer es navegar mis divs a través de los botones Anterior/Siguiente. Me las arreglé para hacer que cambiara de uno a otro, pero de alguna manera se ignora el tercer div y no sé lo que me estoy perdiendo.
Aquí está mi código de fragmento:
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>EDITAR: Actualmente estoy trabajando solo en el botón "siguiente", por lo que el anterior aún no funciona.
Está seleccionando el siguiente botón por id, pero hay varios botones siguientes en la página, por lo que solo se selecciona el que está en div1.
Las identificaciones en un documento deben ser únicas, puede leer más sobre esto aquí: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
Seleccione el botón por clase con algo como document.querySelector('.next-button') y también debería poder manejar el clic en div2 .
También asegúrese de inicializar i a 1, ya que de lo contrario se necesitarían dos clics para llegar a div2 .
No puede tener más de un elemento con la misma identificación, esa fue la razón por la que no funcionó.
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>