Как увеличивать значение внутренней переменной по клику на объект li со страницы?

Question

Нужно чтобы, по клику на строку, увеличивался score в аргументе data. Например по клику на "TEST03" увеличивался score +1 в аргументе "id: '2', score: 7, value: 'Item 3'" -> "id: '2', score: 8, value: 'Item 3'"

Моя проблема в том, что я не могу найти способ как узнать порядковый номер .item по счету в .container Пытался с getelementsbyclassname но не вышло.

  class TestContainer {
    constructor(selector, options) {
      this.$container = document.querySelector(selector);
      this.options = options;
      this.#setup();
    }
  
    #setup() {
      this.clickHandler = this.clickHandler.bind(this);
      this.$container.addEventListener('click', this.clickHandler);
    }

    clickHandler(event, options) {
      const { type } = event.target.dataset;

      const { data } = this.options;
      this.$containerItem = this.$container.querySelectorAll('.item');

  
      console.log(this.$containerItem)
      console.log(data[1].score)

      //TODO при нажатии менять data score
    }
  }
  
  const testContainer = new TestContainer('.container', {
    
    data: [
      { id: '0', score: 7, value: 'Item 1' },
      { id: '1', score: 7, value: 'Item 2' },
      { id: '2', score: 7, value: 'Item 3' },
      { id: '3', score: 7, value: 'Item 4' },
    ],
  });
  window.testContainer = testContainer;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="container">
        <li class="item">TEST01</li>
        <li class="item">TEST02</li>
        <li class="item">TEST03</li>
        <li class="item">TEST04</li>
    </ul>

</body>
</html>

Answer 1

Такой простой вариант не подходит?

const container = document.querySelector('.container');
const elements = Array.from(container.children);

container.addEventListener('click', (evt) => {
  const clickedElement = evt.target;
  console.log(elements.indexOf(clickedElement));
});

<ul class="container">
  <li class="item">TEST01</li>
  <li class="item">TEST02</li>
  <li class="item">TEST03</li>
  <li class="item">TEST04</li>
</ul>

БЛОГ НА HUSL

Как увеличивать значение внутренней переменной по клику на объект li со страницы?

Ответы (1 шт):