Можете ли вы добавить функцию onclick к классу div и затем использовать event.target для извлечения innerHTML из определенного div, по которому щелкнули?

Question

Я практикую создание калькулятора чаевых, используя vanilla JS (не знаю JQuery).Вот ссылка: https://codepen.io/decopage/pen/qwVdmm

Я хочу, чтобы человек мог щелкнуть по одному из 15, 20, 25% делений, чтобы выбрать его процентный процент, а затем нажать кнопку «Рассчитать», чтобы получить ответ.

Итак, я назначил атрибут onclick процентным дивам, указав для них идентификатор.Затем я установил функцию onclick для вычисления процента, на основе которого щелкали div, используя event.target.innerHTML, а затем parseInt для анализа innerHTML в целое число.

Затем я планирую добавить addEventListener к кнопке вычисления и назначить ответ функции onclick переменной внутри addEventListener и получить окончательный ответ.

Моя проблема в том, что я думаю, что я использую event.target неправильно (я все еще немного запутался в том, как его использовать).

Здесь задается атрибут onclick и функция вычисления процента

const percentage = document.querySelectAll("#amounts");
percentage.setAttribute("onclick");
percentage.onclick = function calculatepercent(event) {
 const num = event.target.innerHTML;
 const numper = parseInt(num);
 const billinp = bill.value;
 const peopinp = people.value;
 let result = (billinp/peopinp) * numper;
 console.log result; 
}

Поэтому, когда я нажимаю div, ничего не выводится на консоль, где я застрял прямо сейчас.Любая помощь будет оценена.Спасибо!

Answer 1

Вместо того, чтобы пытаться добавить обработчик кликов в список узлов, переберите список и добавьте обработчик к отдельным узлам, как предложено @JuanIsFree.

function getTip(e) {
  e.preventDefault();
  let tip = parseInt(e.target.innerHTML.replace('%', ''));
  console.log("TIP", tip);
}

let tips = document.querySelectorAll('#amount');

for (let i = 0; i < tips.length; i++) {
    tips[i].addEventListener('click', getTip);
}

<div id="amount" style="margin-bottom: 10px; cursor: pointer;">0%</div>
<div id="amount" style="margin-bottom: 10px; cursor: pointer;">15%</div>
<div id="amount" style="margin-bottom: 10px; cursor: pointer;">20%</div>

Есть некоторые проблемы, на которые я хотел бы указать.Во-первых, идентификаторы должны быть уникальными среди элементов HTML.Вы не должны иметь несколько div с одним и тем же идентификатором.Использование класса или data-attr было бы более уместным.Кроме того, извлечение значения из внутреннего HTML кажется чрезмерно сложным.