Poetical Scientist Poetical Scientist - 2 months ago 16
HTML Question

Auto update/calculate values for rows in HTML table with Javascript

So I'm pretty sure that I'm missing some pretty obvious things here, but having worked on many parts of a big project for the past many hours this has me breaking my head open.

Basically I am trying to calculate two values for each row in an HTML table. I want the values to auto calculate/update as the table is being filled out.

Currently neither the

Revenue
nor
Value
is being autoupdated/calculated, though I did add
onkeyup = "getValues()"
to the HTML code.

If the
Number Used
field is blank, then the value in
Number in Package
should be used to calculate the Revenue (
price * inPackage
). If it is not blank, then the value in the field should be used (
price * numberUsed
).

Pretty sure that I need to specify that this needs to be done for each row somewhere, but for the life of me have not been able to figure it out yet.

Here's a link to a JSFiddle (which shows the HTML but the js does not work): https://jsfiddle.net/wkts81u9/

Here's my HTML code:

<table id='worksheet_table' class="table table-striped">
<thead>
<tr>
<th>Package</th>
<th>Number in Package</th>
<th>Number Used</th>
<th>Price</th>
<th>Revenue</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td id="package" name="package">1</td>
<td id="inPackage" name="inPackage">50</td>
<td><input type="text" name="numberUsed" id="numberUsed" class="form-control" onkeyup="getValues()" /></td>
<td><input type="text" name="price" id="price" class="form-control" onkeyup="getValues()" /></td>
<td name="revenue" id="revenue"></td>
<td name="value" id="value"></td>
</tr>
<tr>
<td id="package" name="package">2</td>
<td id="inPackage" name="inPackage">100</td>
<td><input type="text" name="numberUsed" id="numberUsed" class="form-control" onkeyup="getValues()" /></td>
<td><input type="text" name="price" id="price" class="form-control" onkeyup="getValues()" /></td>
<td name="revenue" id="revenue"></td>
<td name="value" id="value"></td>
</tr>
</tbody>
</table>


Here's my js:

function getValues()
{
var numberUsed = Number(document.getElementById('numberUsed').value);
var price = Number(document.getElementById('price').value);
var inPackage = Number(document.getElementById('inPackage').value);
var revenue = 0;
if (numberUsed=="")
{
revenue = price * inPackage;
}
else
{
revenue = price * numberUsed;
}
var value = revenue * 5;
document.getElementById("revenue").innerHTML = revenue;
document.getElementById("value").innerHTML = value;
}


(Sorry for any messed up formatting in my code.)

Can anybody tell me what it is missing here?

Answer

I see the need to point out a lot of issues with your code. I created a working sample on JsBin* to help you: http://jsbin.com/gevocahihu/edit?html,output

  • First issue, you are using item IDs more than once. You cannot do that in an HTML file
  • You were accessing inPackage with the wrong attribute. You needed to access its innerHTML property, not value, since that wasn't an <input>.

Note: I took out one row in the example to simplify things. You can expand it to more than one row by adding constructors to your function to specify which row you are to edit, Ex: function getValues(row)

I had a lot of trouble getting this app to work in JSFiddle, which is likely a big in the site, so use JsBin for now.

Comments