Estoy haciendo un juego de pesca, en el que quiero que se oculte un botón hasta que el número de peces llegue a 5. Sin embargo, el botón (colocar trampas para peces) no parece estar oculto aunque se haya cumplido la condición...
let fishNum = document.getElementById("fishNum"); let traps = document.getElementById("cm2Btn2"); function addFish() { let fishNum = document.getElementById("fishNum"); count.innerHTML++; } if (fishNum > 2) { traps.classList.add('fadeOut'); } <div class="cLeftRight"> <span id="fishNum">0</span> </div> <button id="cm2Btn" onclick="document.getElementById('fishNum').innerHTML++">Catch a Herring</button> <button id="cm2Btn2">Set Fish Traps</button>Su ejemplo solo verifica el valor de fishNum en la carga inicial, y fishNum no es un número sino un elemento del dom. Su función addFish nunca se usa, solo el js en línea del html. Su función addFish incrementa una variable llamada conteo, que nunca se define. No hay css para el fadeOut de la clase, por lo que el elemento no se desvanecerá incluso si se agregó la clase.
Vea mi demostración, que es una solución aproximada de lo que estaba intentando hacer. Algunas cosas que cambiaría en el futuro, en lugar de incrementar el HTML de fishNum, tendría una variable en js que incrementa y actualiza la pantalla para reflejar lo que está sucediendo en su js.
En el centro de la respuesta a esta pregunta, creo que está buscando la transition de la propiedad css y el atributo html disabled . Podemos usar js para habilitar el botón cuando agregamos la clase fadeIn , y hacer que pasemos gradualmente de 0 a 1 de opacidad.
let fishNum = document.getElementById("fishNum"); let traps = document.getElementById("cm2Btn2"); function addFish() { fishNum.innerHTML++; if (fishNum.innerHTML > 4) { traps.classList.add("fadeIn"); traps.disabled = false; } } document.getElementById("cm2Btn") .addEventListener("click", addFish); #cm2Btn2 { transition: opacity 1s; opacity: 0; } #cm2Btn2.fadeIn { opacity: 1; } <div class="cLeftRight"> <span id="fishNum">0</span> </div> <button id="cm2Btn">Catch a Herring</button> <button disabled="true" id="cm2Btn2">Set Fish Traps</button>