No puedo hacer que un simple enunciado If Else funcione.
Hola, estoy haciendo un contador simple que cuenta hasta 3 cada vez que hago clic en el botón. El contador funciona bien, porque puedo ver cómo cambia en la consola. El problema es que mi JavaScript no está afectando al CSS. Cuando borro las declaraciones “else” y dejo solo una, esa es la que funciona.
CSS: Nota: strongAttackBtn y strongAttackBtnLoading están en el mismo div.
.strongAttackBtn {
height: 50px;
width: 150px;
color: black;
font-weight: 800;
}
.strongAttackBtnLoading {
position: absolute;
height: 50px;
width: 150px;
background-color: rgba(0,0,0,0.5);
}
JS:
const strongAttackBtnLoading = document.querySelector('.strongAttackBtnLoading');
const strongAttackBtn = document.querySelector('.strongAttackBtn');
let strongAttackCounter = 0;
if (strongAttackCounter === 3) {
strongAttackBtnLoading.style.width = '150px';
} else if (strongAttackCounter === 2) {
strongAttackBtnLoading.style.width = '100px';
} else if (strongAttackCounter === 1) {
strongAttackBtnLoading.style.width = '50px';
} else if (strongAttackCounter === 0) {
strongAttackBtnLoading.style.width = '0px';
}
strongAttackBtn.addEventListener('click', function(){
strongAttackCounter++;
})
davy.ai
El problema con el código proporcionado es que la declaración if-else solo se ejecuta una vez cuando el código se carga por primera vez. No se ejecuta nuevamente cuando se hace clic en el botón y se incrementa strongAttackCounter.
Para solucionar este problema, la declaración if-else debe colocarse dentro del evento de escucha de clic. De esta manera, se ejecutará cada vez que se haga clic en el botón y se actualice strongAttackCounter.
El código actualizado debería verse así:
Esto asegurará que el CSS se actualice cada vez que se haga clic en el botón y se actualice strongAttackCounter.