Проблема с атрибутом и событием onclick

Question

задание следующее: На странице созданы 3 p.task-5 c атрибутом data. С помощью forEach переберите их и добавьте событие клик. Напишите функцию t5, которая будет запускаться при клике и добавлять атрибут data элемента, по которому кликнули в массив a5_res.

 <div>
                    <p class="task-5" data="1">One p with data</p>
                    <p class="task-5" data="34">Two p with data</p>
                    <p class="task-5" data="66">Three p with data</p>
    </div>
    
    
   

     function t5() {
        let a5_res = [];
        let span = document.querySelectorAll('.task-5');
    
        span.forEach(elem => {
            a5_res.push(elem.getAttribute('data'));
        });
    
        console.log(a5_res);
            
        }
        document.querySelectorAll('.task-5').forEach(elem => {
            elem.onclick = t5;
        });

Чтобы я не пробовал, как бы не доставал data атрибут, все равно за счет цикла создается сразу массив со всеми тремя значениями [1, 34, 66], а поочередно добавить никак не могу. Выше одна из многих попыток, поиском конечно пользовался, не помогло. Заранее спасибо за помощь.

Answer 1

По идее должно быть что-то вроде:

(() => {
  const span = document.querySelectorAll('.task-5');
  let a5_res = [];

  const t5 = (e) => {
    a5_res.push(e.target.getAttribute('data'));
    console.log(a5_res);            
  }

  span.forEach(elem => elem.addEventListener('click', t5));
})();

<div>
  <p class="task-5" data="1">One p with data</p>
  <p class="task-5" data="34">Two p with data</p>
  <p class="task-5" data="66">Three p with data</p>
</div>

Для того чтобы добавлять в массив на клик данные из дата атрибута, Вам не нужно перебирать его циклом, а нужно отслеживать клик и брать значение дата атрибута с event.target элемента. Event target -- тот элемент с которым пользователь взаимодействовал в Вашем случае при нажатии.

Answer 2

(() => {

    const span = document.querySelectorAll('.task-5');
    let a5_res = [];
      
    const t5 = (e) => {
        a5_res.push(e.target.getAttribute('data'));
        console.log(a5_res);
        document.querySelector('.out-5').innerHTML = a5_res;
      }
      
    span.forEach(elem => elem.addEventListener('click', t5));
    })();

Answer 3

Можно записать короче.

function t5() {
    a5_res.push(this.getAttribute("data"))
    console.log(a5_res)
}

document.querySelectorAll('.task-5').forEach(elem => {
    elem.onclick = t5;
});

БЛОГ НА HUSL

Проблема с атрибутом и событием onclick

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