Estoy tratando de crear un botón de alternar a través de javascript sin una ID de botón y la visibilidad del elemento css está oculta, he estado tratando de buscarlo en Google pero no puedo encontrar buenas respuestas, solo puedo encontrar cómo alternar usando style.display pero eso no funciona cuando uso visibilidad oculta en css. El nombre del botón para el botón de alternancia es button2 y el botón oculto tiene Hbutton como ID.
document.querySelector(button8).addEventListener(click, function () { document.querySelector("hiddenbutton").style.visibility = "visible"; });Obtenga el estilo actual y use un condicional.
document.querySelector(button8).addEventListener(click, function() { const button = document.querySelector("hiddenbutton"); let current = getComputedStyle(button).getPropertyValue("visibility"); button.style.visibility = current == "visible" ? "hidden" : "visible"; })Puede utilizar el estilo calculado para determinar si el elemento es visible o no.
document.querySelector("button").addEventListener("click", function(){ let p = document.querySelector("p"); let visibility = getComputedStyle(p).visibility; if(visibility == "hidden") p.style.visibility = "visible"; else p.style.visibility = "hidden"; }); p { visibility: hidden; } <p>I will disappear</p> <button>Toggle</button>¡Puedes hacer esto cambiando de clase, lo cual es más simple! Simplemente cree una clase, por ejemplo, .hide y configure la visibilidad como oculta. Siempre que haga clic en el botón, la clase del botón seleccionado cambiará a través de la clase dada ( .hide ).
document.querySelector('.toggle').addEventListener('click', () => { document.querySelector('.myBtn').classList.toggle('hide'); }); .hide { visibility: hidden; } <button class="myBtn">You See Me!</button> <button class="toggle">toggle</button>