Estoy usando el interruptor visible para cambiar entre 3 elementos visibles al presionar un botón, pero solo puedo obtener 2. Gracias por la ayuda :)
function switchVisible() { if (document.getElementById('text1')) { if (document.getElementById('text1').style.display == 'none') { document.getElementById('text1').style.display = 'block'; document.getElementById('text2').style.display = 'none'; document.getElementById('text3').style.display = 'block'; } else { document.getElementById('text1').style.display = 'none'; document.getElementById('text2').style.display = 'block'; document.getElementById('text3').style.display = 'none'; } } } #text1, #text2, #text3 { display: none; } <div id="text1">text 1</div> <div id="text2">text 2</div> <div id="text3">text 3</div> <input id="Button1" type="button" value="Click" onclick="switchVisible();"/>para hacer esto una propuesta puede ser:
var divIds = [ 'text1', 'text2', 'text3' ]; var visibleIndex = 0; function switchVisible() { divIds.forEach(id => { document.getElementById(id).style.display = 'none'; }); document.getElementById(divIds[visibleIndex]).style.display = 'block'; visibleIndex++; if (visibleIndex === divIds.length) { visibleIndex = 0; } } switchVisible(); #text1, #text2, #text3 { display: none; } <div id="text1">text 1</div> <div id="text2">text 2</div> <div id="text3">text 3</div> <input id="Button1" type="button" value="Click" onclick="switchVisible();"/>Puede usar el siguiente enfoque para lograr esto. Use una declaración de cambio y un conteo variable para realizar un seguimiento de 3 divs.
Fragmento de código de trabajo completo:
let count = 1; function switchVisible() { switch (count) { case 1: document.getElementById('text1').style.display = 'block'; document.getElementById('text2').style.display = 'none'; document.getElementById('text3').style.display = 'none'; count++; break; case 2: document.getElementById('text1').style.display = 'none'; document.getElementById('text2').style.display = 'block'; document.getElementById('text3').style.display = 'none'; count++ break; case 3: document.getElementById('text1').style.display = 'none'; document.getElementById('text2').style.display = 'none'; document.getElementById('text3').style.display = 'block'; count = 1 break; default: count = 1 } } #text1, #text2, #text3 { display: none; } <div id="text1">text 1</div> <div id="text2">text 2</div> <div id="text3">text 3</div> <input id="Button1" type="button" value="Click" onclick="switchVisible();" />Espero que así es como querías que funcionara.
Una clase sería mejor para marcar todos los elementos de una colección.
Nota al margen: en mi experiencia, las clases casi siempre son mejores, ya que se pueden aplicar a uno o varios elementos. Las identificaciones son imo. más para casos especiales. Se refieren a un solo elemento que debe ser único en toda la página.
Ahora volviendo al tema:
Acerca de la alternancia, puede realizar un seguimiento del elemento visible en una variable:
let visible = 0; function switchVisible() { const elements = Array.from(document.querySelectorAll(".tab")); elements.forEach((element, index) => { element.style.display = index === visible ? "block" : "none"; }); // increment visible visible = (visible + 1) % elements.length; } .tab { display: none; } <div class="tab">text 1</div> <div class="tab">text 2</div> <div class="tab">text 3</div> <input id="Button1" type="button" value="Click" onclick="switchVisible();" />o averigua cuál es visible en la propia función.
function switchVisible() { const elements = Array.from(document.querySelectorAll(".tab")); // checking which one is the first that has some dimension let visible = elements.findIndex(element => element.offsetWidth || element.offsetHeight); // increment visible visible = (visible + 1) % elements.length; // make this "next one" visible elements.forEach((element, index) => { element.style.display = index === visible ? "block" : "none"; }); } .tab { display: none; } <div class="tab">text 1</div> <div class="tab">text 2</div> <div class="tab">text 3</div> <input id="Button1" type="button" value="Click" onclick="switchVisible()" />