Momin Altamash
Momin Altamash

Reputation: 41

how to use javascript functions multiple times

I'm running a code where I must create a function and call it multiple times. I am having trouble calling it more than once. how to use Mul() function in second table row. Please help Me. Thanks.

function Mul() {
  var quantity = document.getElementById("quantity").value;
  var price = document.getElementById("price").value;
  document.getElementById(id).value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
  <thead>
    <tr>
      <th>Description</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <input type="number" id="quantity" class="form-control" onkeyup="Mul()">
      </td>
      <td>
        <input type="number" id="price" class="form-control" onkeyup="Mul()">
      </td>
      <td>
        <input type="text" id="amount" class="form-control" disabled>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <input type="number" id="quantity" class="form-control">
      </td>
      <td>
        <input type="number" id="price" class="form-control">
      </td>
      <td>
        <input type="text" id="result" class="form-control" disabled>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 86

Answers (1)

Ashish Kalekar
Ashish Kalekar

Reputation: 67

Add class name for every input and pass index to Mul() function try below code.

function Mul(index) {
  var quantity = document.getElementsByClassName("quantity")[index].value;
  var price = document.getElementsByClassName("price")[index].value;

  document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
  <thead>
    <tr>
      <th>Description</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <input type="number" id="" class=" quantity form-control" onkeyup="Mul('0')">
      </td>
      <td>
        <input type="number" id="" class="price form-control" onkeyup="Mul('0')">
      </td>
      <td>
        <input type="text" id="amount" class="amount form-control" disabled>
      </td>
    </tr>
   <tr>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <input type="number" id="" class=" quantity form-control" onkeyup="Mul('1')">
      </td>
      <td>
        <input type="number" id="" class="price form-control" onkeyup="Mul('1')">
      </td>
      <td>
        <input type="text" id="amount" class="amount form-control" disabled>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <input type="number" id="" class=" quantity form-control" onkeyup="Mul('2')">
      </td>
      <td>
        <input type="number" id="" class="price form-control" onkeyup="Mul('2')">
      </td>
      <td>
        <input type="text" id="amount" class="amount form-control" disabled>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 4

Related Questions