getElementsByClassName + onclick на элемент полученной коллекции

242

04 июня 2021, 12:50

Нужно чтобы при клике в браузере на слова "просто", "средне", "сложно" в div с классом result вставлялось значение + значение дата атрибута. Сейчас при клике на элемент выводятся все значения сразу, а нужно только того элемента на который кликнул.

<div class="toggle" data-value="3">
  Просто
</div>
<div class="toggle" data-value="6">
  Средне
</div>
<div class="toggle" data-value="9">
  Сложно
</div>
<div class="result">
</div>

let elems = document.getElementsByClassName('toggle');
let result = document.querySelector('.result');
function func() {
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].getAttribute('data-value') !== undefined ){
        let p = document.createElement('p');
        p.innerHTML = elems[i].innerHTML + elems[i].dataset.value;
    result.appendChild(p);
  }   
    }
}
elems[0].addEventListener('click', func);
elems[1].addEventListener('click', func);
elems[2].addEventListener('click', func);

Answer 1

const elem = document.querySelectorAll('.toggle'); 
const result = document.querySelector('.result'); 
 
for(let i = 0; i < elem.length; i++) { 
  // Развешиваем событие клика на элементы 
  elem[i].addEventListener('click', function() { 
    // Записываем в result содержание блока и его data атрибут 
    result.innerText = `${this.innerText} - ${this.dataset.value}`; 
  }); 
}

<div class="toggle" data-value="3"> 
  Просто 
</div> 
<div class="toggle" data-value="6"> 
  Средне 
</div> 
<div class="toggle" data-value="9"> 
  Сложно 
</div> 
 
<div class="result"></div>