How to count user first & Second input and display different result within the same function with JavaScript

Question

So I'm trying to assign the result value(from user input Unit_Price_1 * Quantity_1) to the total text field for each row. I get it to work for my first row but cant work for my second row ?, Kinda still a noob trying to do something with my idea

HTML code :

<table>
<thead>
  <tr>
    <th>Unit Price</th>
    <th>Quantity</th>
    <th>Total</th>
  </tr>
</thead>
<tbody>
   <!---------------- ROW 1 ------------------>
    <td>
      <input type="number" name="unit price" placeholder="0.00" id="Unit Price_1" oninput="calculateTotal()"/>
    </td>
    <td>
      <input type="number" name="Quality" placeholder="0" id="Quantity_1" oninput="calculateTotal()"/>
    </td>
    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="Total_1"
      />
    </td>
  </tr>
   <!---------------- ROW 2 ------------------>
    <td>
      <input type="number" name="unit price" placeholder="0.00" id="Unit Price_1" oninput="calculateTotal()"/>
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="Quantity_1" oninput="calculateTotal()"/>
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="Total_1"
      />
    </td>
  </tr>
</tbody>

JavaScript:

  function calculateTotal() {
    
  var Unit_Price_1 = document.getElementById('Unit Price_1').value; 
  var Quantity_1 = document.getElementById('Quantity_1').value;
  var Total_1 = document.getElementById('Total_1')
  var Total_Amount_1 = Unit_Price_1 * Quantity_1;
  Total_1.value = Total_Amount_1
  
}

`id` attributes _must_ be [unique](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page). — chazsolo, Jun 02 '21 at 16:01

score 0 · Answer 1 · answered Jun 02 '21 at 16:02

ids must be unique.

Your first function only considers the first two inputs. Create a new function that does the same for the first two inputs on the next row.

Try this:

function calculateTotal() {

  var Unit_Price_1 = document.getElementById('Unit Price_1').value;
  var Quantity_1 = document.getElementById('Quantity_1').value;
  var Total_1 = document.getElementById('Total_1')
  var Total_Amount_1 = Unit_Price_1 * Quantity_1;
  Total_1.value = Total_Amount_1

}
function calculateTotal2() {

  var Unit_Price_1 = document.getElementById('Unit Price_2').value;
  var Quantity_1 = document.getElementById('Quantity_2').value;
  var Total_1 = document.getElementById('Total_2')
  var Total_Amount_1 = Unit_Price_1 * Quantity_1;
  Total_1.value = Total_Amount_1

}

<table>
  <thead>
    <tr>
      <th>Unit Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <!---------------- ROW 1 ------------------>
    <td>
      <input type="number" name="unit price" placeholder="0.00" id="Unit Price_1" oninput="calculateTotal()" />
    </td>
    <td>
      <input type="number" name="Quality" placeholder="0" id="Quantity_1" oninput="calculateTotal()" />
    </td>
    <td>
      <input required type="number" name="total" value="0.00" readonly="readonly" id="Total_1" />
    </td>
    </tr>
    <!---------------- ROW 2 ------------------>
    <td>
      <input type="number" name="unit price" placeholder="0.00" id="Unit Price_2" oninput="calculateTotal()" />
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="Quantity_2" oninput="calculateTotal2()" />
    </td>

    <td>
      <input required type="number" name="total" value="0.00" readonly="readonly" id="Total_2" />
    </td>
    </tr>
  </tbody>

Is there a way which I dont have to create a new function ? and used maybe like a loop structure ?, or this is the only way ? — BodyGT, Jun 03 '21 at 01:15
yeah I know what you mean and I started learning like loop function and was wondering I could implement something like a loop structure ? is it possible with javascript , cause I'm curios and want to learn more about it ? like which loop function is best for this situation ? cause I cant find a solution to what I want — BodyGT, Jun 04 '21 at 03:42

How to count user first & Second input and display different result within the same function with JavaScript

1 Answers1