HTML input in table not responding to onkeyup
https://stackoverflow.com/questions/4823168
-
26-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Here is the code initializing my Table:
<table cellspacing="0">
<caption id="title4">
Sprinkles (5 - 6 oz.)
</caption>
<thead>
<tr>
<th> </th>
<td >Price</td>
<td >Quantity</td>
</tr>
</thead>
<tbody>
<tr class="statement4">
<th><label>Lemon</label></th>
<td title="Yes" >
<label>$6.50</label>
</td>
<td title="No" >
<input id="s1" name="s1" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Sweet Apple</label></th>
<td title="Yes" >
<label>$6.50</label>
</td>
<td title="No" >
<input id="s2" name="s2" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Sweet Caramel</label></th>
<td title="Yes" >
<label>$6.50</label>
</td>
<td title="No" >
<input id="s3" name="s3" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Sweet Cinnamon</label></th>
<td title="Yes" >
<label>$6.50</label>
</td>
<td title="No" >
<input id="s4" name="s4" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Sweet Mocha</label></th>
<td title="Yes" >
<label>$6.50</label>
</td>
<td title="No" >
<input id="s5" name="s5" class="field text small" type="text" value="0"/>
</td>
</tr>
</tbody>
</table>
And here is my javascript:
<script type="text/javascript">
var total = 0.0;
var all=new Array();
for(var i = 0; i < 49; i++)
all[i] = 0;
//....I OMMITTED CODE HERE FOR THE REST OF THE onkeyup FUNCTIONS
document.getElementById("s1").onkeyup = function() {
if(this.value != "") {
all[44] = (parseInt(this.value,10) * 6.50);
}
else {
all[44] = 0;
}
updateIt();
};
document.getElementById("s2").onkeyup = function() {
if(this.value != "") {
all[45] = (parseInt(this.value,10) * 6.50);
}
else {
all[45] = 0;
}
updateIt();
};
document.getElementById("s3").onkeyup = function() {
if(this.value != "") {
all[46] = (parseInt(this.value,10) * 6.50);
}
else {
all[46] = 0;
}
updateIt();
};
document.getElementById("s4").onkeyup = function() {
if(this.value != "") {
all[47] = (parseInt(this.value,10) * 6.50);
}
else {
all[47] = 0;
}
updateIt();
};
document.getElementById("s5").onkeyup = function() {
document.getElementById("mySpan").innerHTML = "WOAH";
if(this.value != "") {
all[48] = (parseInt(this.value,10) * 6.50);
}
else {
all[48] = 0;
}
updateIt();
};
function updateIt() {
var theTotal = 0;
for(var j = 0; j < 49; j++)
theTotal += all[j];
theTotal = all[48];
document.getElementById("mySpan").innerHTML = "$" + theTotal.toFixed(2);
}
</script>
Note that I have more tables and other onKeyUp functions declared, but for some reason all the tables after this table (I have about 6 tables, and the first 3 work properly), do not respond to their respective onkeyup events.
Here is code for the last table that worked (this code is right above the code creating the table I posted above):
<table cellspacing="0">
<caption id="title4">
Rubs (1.2 - 2.3oz.)
</caption>
<thead>
<tr>
<th> </th>
<td >Price</td>
<td >Quantity</td>
</tr>
</thead>
<tbody>
<tr class="statement4">
<th><label>Buffalo</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs1" name="rubs1" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Chipotle</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs2" name="rubs2" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Citrus</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs3" name="rubs3" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Creole</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs4" name="rubs4" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Crushed Peppercorn & Garlic</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs5" name="rubs5" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Greek</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs6" name="rubs6" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Jamaican Jerk</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs7" name="rubs7" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Lemon Pepper</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs8" name="rubs8" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Moroccan/label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs9" name="rubs9" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Smoky Barbecue</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs10" name="rubs10" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Thai Red Curry</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs11" name="rubs11" class="field text small" type="text" value="0"/>
</td>
</tr>
</tbody>
</table>
Solution
var theTotal = 0;
for(var j = 0; j < 49; j++)
theTotal += all[j];
theTotal = all[48];
Why are you doing this? First you calculate the sum of all prices, then you assign only the last value to theTotal. This seems wrong to me.
OTHER TIPS
You are missing an element by id "mySpan" though you are looking for it in your JS(document.getElementById("mySpan").innerHTML ), hence it is erroring out.
Add a HTML element with that ID and it should work.
Check jsfiddle: http://jsfiddle.net/Chandu/yVaMx/5/
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
