Здесь для каждого элемента создается отдельное событие. Хотелось бы сделать более правильно.
При клике на объект класс "fruits"
, должно браться значение из объекта.
Как можно привязать к классу(fruits)
объект и выполнить одно событие для всех элементов класса?
let arr = [
{title: 'Apple', val: "25 cal."},
{title: 'Orange', val: "35 cal."},
{title: 'Apricot', val: "45 cal."},
{title: 'Mandarin', val: "55 cal."},
{title: 'Stawberry', val: "65 cal."},
{title: 'Rastberry', val: "75 cal."},
];
function fruitClick() {
let result = document.querySelector('.result');
/
for (let i in fruitItem) {
let out = '';
fruitItem[i].onclick = function() {
for (let x in arr) {
if (fruitItem[i].getAttribute('data-name') == arr[x].title) {
out += `<p>${arr[x].val}</p>`;
}
}
result.innerHTML = out;
}
}
}
<div class="fruitsCalc">
<div class="container">
<div class="fruits" id="Apple" data-name="Apple" onclick="fruitClick()">Apple</div>
<div class="fruits" id="Orange" data-name="Orange" onclick="fruitClick()">Orange</div>
<div class="fruits" id="Apricot" data-name="Apricot" onclick="fruitClick()">Apricot</div>
</div>
<div class="container">
<div class="fruits" id="Mandarin" data-name="Mandarin" onclick="fruitClick()">Mandarin</div>
<div class="fruits" id="Stawberry" data-name="Stawberry" onclick="fruitClick()">Stawberry</div>
<div class="fruits" id="Rastberry" data-name="Rastberry" onclick="fruitClick()">Rastberry</div>
</div>
<div class="result">
<h2 style="text-align: center">RESULT:</h2>
</div>
</div>
if (fruitItem[i].getAttribute('data-name') == arr[x].title) {
Я об этой строке