Блог

Главная - Вопросы по программированию - Зачем нажимать на кнопку во второй раз, а не в первый?

Зачем нажимать на кнопку во второй раз, а не в первый?

#javascript #ecmascript-6 #timer #counter #addeventlistener

Вопрос:

Я написал следующий код, чтобы делать счетчик при каждом щелчке. Но в то же время с первым щелчком ничего не происходит, и кнопка начинает отсчет со второго щелчка. Можете ли вы помочь мне понять, в чем проблема с этим кодом и почему счетчик не запускается при первом нажатии?

 <button id="btn" class="btn" >click me</button>
<p>0</p>


<script>
    let count = 0;
    let number =document.querySelector("p");

const btn =document.getElementById("btn");

        btn.addEventListener("click" ,  ()=>
            number.innerHTML = count  
    )

</script>

Комментарии:

1. Вы увеличиваете значение после его установки. Воспользуйся count .

Ответ №1:

count возвращает значение перед добавлением 1. Разделите его на две строки:

 let count = 0;
let number = document.querySelector("p");

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  count  ;
  number.innerHTML = count;
}); 
 <button id="btn" class="btn">click me</button>
<p>0</p>

Ответ №2:

Как кто-то уже упоминал, оператор post-increment ( count ) увеличивает значение после его оценки (отсюда и сообщение).

Одним из вариантов было бы использовать вместо этого оператор предварительного приращения ( count ), который вычисляет переменную после ее увеличения.

 let count = 0;
const number = document.querySelector("p");

const btn = document.getElementById("btn");

btn.addEventListener("click", () => number.innerHTML =   count); 
 <button id="btn" class="btn">click me</button>
<p>0</p>

Ответ №3:

Сначала увеличьте значение count, а затем назначьте его ( number.innerHTML ). Используйте оператор предварительного приращения ( count )

Метки: ,