1

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

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;
});
<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>

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

3 ответа 3

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 -- тот элемент с которым пользователь взаимодействовал в Вашем случае при нажатии.

2
  • Спасибо Вам большое, я пытался делать с Event target, немного не так делал, поэтому не получалось, путаюсь в синтаксисе еще) Commented 19 авг. 2021 в 19:40
  • @ДмитрийБогомолов ну и собственно определение пустого массива a5_res должно быть вне фунции t5, так как при каждом клике это будет новый массив и только с текущим значением.
    – Simon
    Commented 19 авг. 2021 в 19:45
1

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

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

document.querySelectorAll('.task-5').forEach(elem => {
    elem.onclick = t5;
});
1
  • 1
    пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 31 янв. 2022 в 12:22
0
(() => {

    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));
    })();
1
  • 1
    пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 26 авг. 2021 в 20:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.