Как к элементу добавить +1 при нажатии?

Question

[Edhunter]

Есть список ul с li

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
   </ul>

Мне нужно сделать так, что нажатые элемент является li, то тогда к его значению нужно прибавить +1.
У меня прибавляется число 2 к каждой li при нажатии почему-то

let ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
   
   if (event.target.tagName == 'LI') {
      let number = 1;
      number++;
      event.target.innerHTML += number;
   }
})

Comments

[lexchz]

Убери number++;

[Edhunter]

lexchz, убрал и в итоге теперь добавляется число 1. При нажатии число не прибавляет +1 к предыдущему, а вносит его просто как элемент

[lexchz]

Edhunter,

if (event.target.tagName == 'LI') {
      event.target.innerText++;
   }

[Edhunter]

lexchz, все проще некуда. Спасибо!

Answer 1

[xxvxx]

if (event.target.tagName == 'LI') {
      let number = 1; // тут ты объявляешь число
      number++; //тут ты объявленное число увеличиваешь на 1 а 1+1=2
      event.target.innerHTML += number;  // и поэтому увеличиваешь значение на 2
   }
  if (event.target.tagName == 'LI') {
      let number = Number(event.target.innerHTML); // тут мы получаем и преобразовываем значение в число
      number++; //тут ты объявленное число увеличиваешь на 1 
      event.target.innerHTML = number; // и присваиваем значение
   }

Comments

[Edhunter]

У меня вопрос по строчке let number = Number(event.target.innerHTML):
Правильно ли я понял, что в переменную number, с помощью конструктора записывается html значение (если так можно выразиться) элемента, на который был сделан клик?

[xxvxx]

Edhunter, Да все верно

Answer 2

[Алексей Скляров]

let ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {   
   if (event.target.tagName == 'LI') {
      event.target.innerHTML = +event.target.innerText + 1;
   }
})