how to use javascript functions multiple times

Question

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>

see: https://stackoverflow.com/questions/29514382/global-functions-in-javascript — , Dec 22 '21 at 08:19
html `id=` attributes have to be unique; so you cannot have multiple fields each with `id=quantity/price/amount`. when you want shared behavior/styling for multiple elements, use `class=""`. So `` should be something like `` — Raxi, Dec 22 '21 at 08:20

score 4 · Answer 1 · answered Dec 22 '21 at 08:38

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>

how to use javascript functions multiple times

1 Answers1