Estoy haciendo un juego de Javascript, en el que quiero que el botón de sleep desaparezca si el número de peces es inferior a 4. Ya configuré una instrucción if, pero parece que solo funciona una vez que el número es inferior a 4. ¿Hay algún manera de mantener esta instrucción if ejecutándose una y otra vez?
(Puede aumentar el número haciendo clic en el botón catchFish . Puede disminuir el número haciendo clic en sleep ).
let fishNum = document.getElementById("fishNum"); let sleep = document.getElementById("Btn2"); function addFish() { fishNum.innerHTML++; if (fishNum.innerHTML > 4) { sleep.disabled = false; } } document.getElementById("Btn1").addEventListener("click", addFish); function loseFish() { fishNum.innerHTML--; if (fishNum.innerHTML <= 4) { sleep.style.opacity = "0"; sleep.style.pointerEvents = "none"; } } document.getElementById("Btn2").addEventListener("click", loseFish); <span id=fishNum>0</span> <button id="Btn1">catchFish</button> <button id="Btn2" disabled="true">sleep</button> let fishNum = document.getElementById("fishNum"); let sleep = document.getElementById("Btn2"); function addFish() { fishNum.innerHTML++; if (fishNum.innerHTML > 4) { sleep.disabled = false; } } document.getElementById("Btn1").addEventListener("click", addFish); function loseFish() { fishNum.innerHTML--; if (fishNum.innerHTML <= 4) { //sleep.style.opacity = "0"; sleep.disabled = true; //sleep.style.pointerEvents = "none"; } } document.getElementById("Btn2").addEventListener("click", loseFish); <span id=fishNum>0</span> <button id="Btn1">catchFish</button> <button id="Btn2" disabled="true">sleep</button>Debe hacer que la acción de deshabilitar el botón sea exactamente lo contrario de habilitarlo. Actualmente usas diferentes efectos que no son opuestos entre sí, por lo que no funciona como quieres.
Así que decida usar la propiedad de disable en ambos oyentes o usar la opacity en ambos oyentes. Debe ser consistente.
Así que aquí está cómo podrías hacerlo con disable . Sugeriría reunir un código similar en una sola función:
let fishNum = document.getElementById("fishNum"); let sleep = document.getElementById("Btn2"); function adjustFish(diff) { fishNum.innerHTML = +fishNum.innerHTML + diff; sleep.disabled = +fishNum.innerHTML <= 4; } document.getElementById("Btn1").addEventListener("click", () => adjustFish(1)); document.getElementById("Btn2").addEventListener("click", () => adjustFish(-1)); <span id=fishNum>0</span> <button id="Btn1">catchFish</button> <button id="Btn2" disabled="true">sleep</button>para repetir una condición puede usar bucles while/do while. y como dijo @trincot, decide qué es exactamente lo que quieres. ¿deshabilitar? ¿desaparecer? ¿retirar? o lo que sea. solo apégate a tu decisión
let fishNum = document.getElementById("fishNum"); let sleep = document.getElementById("Btn2"); function addFish() { fishNum.innerHTML++; if (fishNum.innerHTML > 4) { sleep.disabled = false; } else { sleep.disabled = true; } } document.getElementById("Btn1").addEventListener("click", addFish); function loseFish() { do { fishNum.innerHTML--; sleep.style.opacity = "0"; //sleep.style.pointerEvents = "none"; } while (fishNum.innerHTML > 4); if (fishNum.innerHTML <= 4) { sleep.disabled = !sleep.disabled; sleep.style.opacity = "100%"; } } document.getElementById("Btn2").addEventListener("click", loseFish);