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>

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 <input type="number" id="quantity" class="form-control"> should be something like <input type="number" class="quantity form-control"> — Raxi
– Raxi, Commented Dec 22, 2021 at 8:20

Ashish Kalekar · Accepted Answer · 2021-12-22 08:38:58Z

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>

Collectives™ on Stack Overflow

how to use javascript functions multiple times

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related