Estoy tratando de lograr un efecto de alternancia usando las propiedades de visualización, solo se debe mostrar un botón a la vez, mientras que el otro está oculto y viceversa. Actualmente, puedo ocultar el botón de apagado si hago clic en cualquiera de los botones, entonces, ¿qué debo hacer para que solo se muestre uno a la vez?
function myFunction() { var x = document.getElementById("on"); var y = document.getElementById("off"); y.style.display ="none"; if (x.style.display === "none") { x.style.display = "block"; } else { y.style.display = "none"; x.style.display = "block"; } } <button onclick="myFunction()" id="on">ON</button> <button onclick="myFunction()" id="off">OFF</button>El problema con su lógica es que necesita cambiar el estado de display de ambos elementos dentro de la función que llama:
var on = document.getElementById("on"); var off = document.getElementById("off"); function myFunction() { if (on.style.display === "none") { off.style.display = "none"; on.style.display = "block"; } else { off.style.display = "block"; on.style.display = "none"; } } <button onclick="myFunction()" id="on">ON</button> <button onclick="myFunction()" id="off" style="display: none;">OFF</button> Otra forma de hacer lo que necesita sería usar una clase CSS para ocultar el elemento requerido. Esto evita la necesidad de la condición if . Luego puede usar classList.toggle() para activar/desactivar la clase en cada elemento en clics sucesivos. Algo como esto:
let toggles = document.querySelectorAll('.toggle'); toggles.forEach(toggle => { toggle.addEventListener('click', e => { toggles.forEach(el => el.classList.toggle('hide')); }); }); .hide { display: none; } <button class="toggle" id="on">ON</button> <button class="toggle hide" id="off">OFF</button>O incluso más simplemente usando jQuery:
let $toggles = $('.toggle').on('click', () => $toggles.toggleClass('hide')); .hide { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <button class="toggle" id="on">ON</button> <button class="toggle hide" id="off">OFF</button>