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 JS no afecta el CSS. Cuando elimino las declaraciones else y dejo solo una, esta es la que está funcionando.
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++; })Prueba este código.
Debe asignar CSS a ambos DIV y colocar su código de instrucción if en la función de clic addEventListener .
const strongAttackBtn = document.querySelector('.strongAttackBtn'); const strongAttackBtnLoading =document.querySelector('.strongAttackBtnLoading'); var strongAttackCounter = 0; strongAttackBtn.addEventListener('click', function(){ strongAttackCounter++; if (strongAttackCounter === 3) { strongAttackCounter=0; // set it to zero again; strongAttackBtnLoading.style.width = '150px'; strongAttackBtn.style.width = '150px'; } else if (strongAttackCounter === 2) { strongAttackBtnLoading.style.width = '100px'; strongAttackBtn.style.width = '100px'; } else if (strongAttackCounter === 1) { strongAttackBtnLoading.style.width = '50px'; strongAttackBtn.style.width = '50px'; } else if (strongAttackCounter === 0) { strongAttackBtnLoading.style.width = '0px'; strongAttackBtn.style.width = '0px'; } }) .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); } <div class="strongAttackBtnLoading"><input class="strongAttackBtn" type="button" value="strongAttackBtn"></div>