Quiero ocultar un botón al hacer clic en otro botón. Así que verifiqué algunas preguntas sobre el desbordamiento de pila. Usé la propiedad de visualización y la asigné a oculta. Y ahora quiero mostrarlo con el clic de otro botón.
Quiero incrementar la variable "a" al hacer clic en el botón 1. y cuando la variable a es mayor o igual a tres, quiero mostrar el 'botón' (El botón que tiene id #nuevamente) que está oculto. Eso significa que después de hacer clic en el botón 1 dos veces, quiero mostrar el botón. Pero no está funcionando. No importa cuántas veces haga clic en el botón 1, no funciona. Utilicé la propiedad de visualización y la oculté en el archivo html.
¿Alguien podría decir qué quiero hacer aquí para mostrar el botón cuando se hace clic en el botón 1 dos veces?
let a = 1; let button = document.querySelector("#again"); let button1 = document.querySelector("#again1"); button1.onclick = () => { a++; } if (a >= 3) { button.style.display = "block"; } <button id="again" style="display:none;">click me</button> <button id="again1">here</button> <script src="practise.js"></script>Su bloque if se calcula solo una vez al principio cuando el navegador analiza el archivo js. En cambio, desea verificarlo cada vez button1 se hace clic en el botón 1. Muévalo dentro del detector de eventos.
let a = 1; let button = document.querySelector("#again"); let button1 = document.querySelector("#again1"); button1.onclick = () => { a++ if (a >= 3) { button.style.display = "block"; } } <button id="again" style="display:none;">click me</button> <button id="again1">here</button> let a = 1; let button = document.querySelector("#again"); let button1 = document.querySelector("#again1"); button1.onclick = () => { a++; if (a >= 3) { button.style.display = "block"; } } <button id="again" style="display:none;">click me</button> <button id="again1">here</button> <script src="practise.js"></script>Alternativa usando eventListener y hidden
let a = 1; let button = document.querySelector("#again"); let button1 = document.querySelector("#again1"); button1.addEventListener("click", () => { a++; button.hidden = a < 3 }) <button id="again" hidden>click me</button> <button id="again1">here</button> <script src="practise.js"></script>Simplemente coloque la condición if dentro de la función onClick() .
let a = 1; let button = document.querySelector("#again"); let button1 = document.querySelector("#again1"); button1.onclick = () => { a++ if (a > 2) { button.style.display = "block"; } } <button id="again" style="display:none;">click me</button> <button id="again1">here</button>