Create a common function to use same for other data

user_10302659 0
Viewed 155

I am making a list of item and want to calculate its value as quantity change, but how to make the function common so that I can use it for all row?

Can you suggest some best and easy ways but remember I want to do it by javascript only.

  <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>

script

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;
}
datatable javascript
1 Answers

Rather than using inline handlers (which are generally considered to be pretty bad practice), you can use event delegation on the table itself, and you can keep your code DRY-er if you have a single function that handles number changes, rather than two. If the target (the clicked element) matches a + button, call with a parameter of 1, and if the target matches a - button, call with a parameter of -1. Also pass the target - from it, you can identify the associated quantity, price, and total elements in the same <tr> by accessing the parentElements of the button.

With this implementation, all the data is stored in the HTML itself - there are no persistent variables, and there's no need for any IDs anymore.

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>

user_95152070
Related