Как сделать вывод текста по кнопке?

Question

[hsq]

У меня есть 3 кнопки, при нажатии на 1 кнопку должен выводиться элемент из массива и добавлять в counter + 1, вторая кнопка тоже выводит следующий элемент и добавляет в counter + 2, третья кнопка только выводит следующий элемент.
Количество элементов определяет пользователь. У меня не работает цикл, при нажатии на кнопку выводятся все элементы и в counter попадает полная длинна цикла

let paragraph = document.getElementById("question");
  const arrayOfStorage = JSON.parse(localStorage.getItem('value'))
  paragraph.innerHTML = arrayOfStorage[0];

function quiz () {
    let counter = 0;
    let maxScore = arrayOfStorage.length * 2;
    for (let i = 0; i < arrayOfStorage.length; i++) {
      document.querySelector('#understand').addEventListener('click', function() {
        paragraph.innerHTML += arrayOfStorage[i];
        counter += 1;
        console.log(counter)
      }) 
      document.querySelector('#know').addEventListener('click', function() {
        counter += 2;
        paragraph.innerHTML += arrayOfStorage[i];
        console.log(counter)
      })
      document.querySelector('#skip').addEventListener('click', function() {
        paragraph.innerHTML += arrayOfStorage[i];
      })
    }
  };

Comments

[Kentavr16]

а зачем тут цикл?

[hsq]

Kentavr16, ну вот пользователь определяет количество элементов массива, как выводить элементы без цикла по порядку?

[Kentavr16]

hsq, элементы массива выводить в цикле. Проблема в том что вы добавляете циклом слушатели событий. То есть в вашем примере слушателей будет столько, сколько элементов в json.

[hsq]

Kentavr16, мне нужно проверять какая кнопка была нажата, я не нашел информации как это сделать

[Kentavr16]

hsq, и к тому же вам не нужно насколько я понимаю выводить все элементы сразу. Вот пример в песочнице. Там для всего использую 1 слушатель

[Kentavr16]

hsq, Советую начать с начала - базовый курс js. А пока вот отправная точка. Почитайте про жизненный цикл событий (event),всплытие, перехват событий.

[hsq]

Kentavr16, сделал так, не работает

let buttons = document.querySelectorAll('#btn');
  let counter = 0;
  let arrInk = 0;

  buttons.forEach((btn) => {
    btn.addEventListener('click', (e) => {
      switch(e.target.dataset.action) {
        case 'understand': {
          counter++;
          arrInk++;
          paragraph.innerHTML = arrayOfStorage[arrInk]
          console.log(counter)
          break
        }
        case 'know': {
          counter += 2;
          arrInk++;
          paragraph.innerHTML = arrayOfStorage[arrInk]

          break
        }
        case 'skip': {
          arrInk++;
          paragraph.innerHTML = arrayOfStorage[arrInk]

          break
        }
      }
    })
  })

[hsq]

Kentavr16 Исправил, работает на кейсе understand и skip, но на know не работает, не переключает счетчик

[hsq]

Была моя ошибка, спасибо за помощь Kentavr16 :)

[Kentavr16]

hsq, заметь только что это скорее частный пример, не стоит считать такое решение лучшим или хотя бы хорошим. Учите матчасть. Happy hacking!