Common javascript function

JavaScript
1

i have created a function but now i want use same function for other row data 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>

scripting line are as:-

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;
  //console.log(total);
}
function decrementNum(){
  quantityVal--;
  quantity.innerHTML=quantityVal;
  total.innerHTML = quantity.innerHTML*price;
}

give me idea with simple way,

2

You need to tell your function which elements to select instead of coding it directly into Javascript. The best way to do this would be using parameters. For example:

function example(element1, element2, element3){
    var ele1 = document.querySelector("#" + element1);
    var ele2 = document.querySelector("#" + element2);
    var ele3 = document.querySelector("#" + element3);

    //Do something with the elements
}

Now you can reuse the function by calling it with:
example('quantity3', 'price3', 'total3');

Hopefully this will point you into the right direction :slight_smile:

3

should i do like this??

<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="incrementDecrement('quantity1', 'price1', 'total1');">+</button>
            <button>-</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="incrementDecrement('quantity2', 'price2', 'total2');">+</button>
            <button>-</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="incrementDecrement('quantity3', 'price3', 'total3');">+</button>
  <button>-</button></td>
      </tr>
    </tbody>
  </table>

    var quantityVal=1;
function incrementDecrement(element1, element2, element3){
    var  quantityVar = document.querySelector("#" + element1);
    var pricevar = document.querySelector("#" + element2);
    var totalVar = document.querySelector("#" + element3);
    //Do something with the elements
    quantityVar.innerHTML=quantityVal++;
    totalVar.innerHTML=quantityVar.innerHTML*pricevar.innerHTML;
    //alert(quantityVar);
}

second btn and third btn is working of Increment except first btn, can u tell me why??

4

Appologies for the late reply. I’ve been a bit inactive for a while. The reason your first button isn’t working is because your elements have the id’s “quantity”, “price” and “total”, while you’re sending “quantity1”, “price1” and “total1”. They don’t match.