Не могу заставить простое утверждение "Если еще" работать

#javascript #if-statement #queryselector

#язык JavaScript #если-заявление #селектор запросов

Вопрос:

Здравствуйте, я делаю простой счетчик, который считает до 3 каждый раз, когда я нажимаю на кнопку. Счетчик работает просто отлично, потому что я вижу, как он меняется в консоли. Проблема в том, что мой JS не влияет на CSS. Когда я удаляю операторы else и оставляю только один, это тот, который работает.

CSS. примечание: strongAttackBtn и strongAttackBtnLoading находятся в одном и том же 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); }

 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  ; })

1. ваш блок операторов if должен находиться внутри прослушивателя событий.

2. Все просто, я не знаю, о чем я думал. Спасибо

3. также вы могли бы сделать свой if/else одной строкой strongAttackBtnLoading.style.width = (strongAttackCounter lt; 150 ? strongAttackCounter * 50 : 150) 'px';

4. Это работает просто великолепно, Лоуренс. Что делает знак»:»? Я не понимаю, почему этот код работает.

Ответ №1:

Попробуйте этот код.

Вы должны назначить CSS оба DIVs и ввести код оператора if в функцию addEventListener click.

 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); }

 lt;div class="strongAttackBtnLoading"gt;lt;input class="strongAttackBtn" type="button" value="strongAttackBtn"gt;lt;/divgt;