Создать общую функцию, чтобы использовать то же самое для других данных

Question

Я составляю список товаров и хочу рассчитать его стоимость как изменение количества, но как сделать функцию общей, чтобы я мог использовать ее для всей строки?

Можете ли вы предложить несколько лучших и простых способов, но помните, что я хочу сделать это только с помощью javascript .

  <table>
<thead>
  <tr>
    <th>
        Name
    </th>
    <th>Quantitiy</th>
    <th>Price</th>
    <th>Total</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>item</td>
    <td id="quantity">0</td>
    <td id="price">25</td>
    <td id="total">0</td>
    <td>
       <button onclick="incrementNum();">+</button>
        <button onclick="decrementNum();">-</button>
    </td>
  </tr>
  <tr>
    <td>item</td>
    <td id="quantity2">0</td>
    <td id="price2">5</td>
    <td id="total2">0</td>
<td>
       <button onclick="incrementNum();">+</button>
        <button onclick="decrementNum();">-</button>
    </td>
  </tr>
   <tr>
    <td>item</td>
    <td id="quantity3">0</td>
    <td id="price3">5</td>
    <td id="total3">0</td>
     <td> <button onclick="incrementNum();">+</button>
  <button onclick="decrementNum();">-</button></td>
      </tr>
    </tbody>
  </table>

Сценарий

var quantityVal=0;
var quantity = document.querySelector("#quantity");
var total = document.querySelector("#total");
var price = document.querySelector("#price").innerHTML;
function incrementNum(){
  quantityVal++;
  quantity.innerHTML=quantityVal;
 total.innerHTML = quantity.innerHTML*price;
    }
    function decrementNum(){
  quantityVal--;
  quantity.innerHTML=quantityVal;
  total.innerHTML = quantity.innerHTML*price;
}

Answer 1

Вместо использования встроенных обработчиков (которые обычно считаются довольно плохой практикой), вы можете использовать делегирование событий на самом table, и вы можете оставить свой код DRY-er, если у вас есть single функция, которая обрабатывает изменения числа, а не два. Если цель (выбранный элемент) соответствует кнопке +, вызовите с параметром 1, а если цель соответствует кнопке -, вызовите с параметром -1. Также передайте цель - по ней вы можете идентифицировать связанные элементы quantity, price и total в том же <tr>, нажав parentElement кнопки.

В этой реализации все данные хранятся в самом HTML - нет постоянных переменных и больше не требуется никаких идентификаторов.

document.querySelector('table').addEventListener('click', ({ target }) => {
  if (target.matches('button:nth-child(1)')) changeNum(target, 1);
  else if (target.matches('button:nth-child(2)')) changeNum(target, -1);
});
function changeNum(button, changeBy) {
  const [, quantityElm, priceElm, totalElm] = button.parentElement.parentElement.children;
  const quantity = Number(quantityElm.textContent) + changeBy;
  quantityElm.textContent = quantity;
  const price = Number(priceElm.textContent);
  const total = quantity * price;
  totalElm.textContent = total;
}

<table>
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th>Quantitiy</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>item</td>
      <td>0</td>
      <td>25</td>
      <td>0</td>
      <td>
        <button>+</button>
        <button>-</button>
      </td>
    </tr>
    <tr>
      <td>item</td>
      <td>0</td>
      <td>5</td>
      <td>0</td>
      <td>
        <button>+</button>
        <button>-</button>
      </td>
    </tr>
    <tr>
      <td>item</td>
      <td>0</td>
      <td>5</td>
      <td>0</td>
      <td> <button>+</button>
        <button>-</button></td>
    </tr>
  </tbody>
</table>