Add the Values of Text boxes dynamically with Javascript
Question
I Expect to get the sum when I click the button but nothing happens. This is however the simplified version of the code I want to use. The values of the textboxes are actually being queried from a database with php. Please F1. Here is the complete code.
<html>
<head>
</head>
<body>
<h1> JavaScript </h1>
<script type="text/javascript">
// Addint an array of values from a text box
function calc(){
var mutli_Credit = document.course_reg.elements['Credit[]'];
var sum = 0, i = 0, len = mutli_Credit.length;
for(i < len; ++i){
sum += parseInt(document.getElementById('Credit[i]).value, 10);
// Use parseFloat if you're dealing with floating point numbers.
}
//alert(sum);
document.getElementById('credit_load').value = sum;
};
</script>
<form name='course_reg' onLoad=''>
MATH101 <input type='text' name='Credit[]' value='3' id='Credit[]' size='3' readonly /><br/>
CSC201 <input type='text' name='Credit[]' value='2' id='Credit[]' size='3' readonly /><br/>
EDU301 <input type='text' name='Credit[]' value='2' id='Credit[]' size='3' readonly /><br/>
<BUTTON onClick='calc()'> CALCULATE </BUTTON>
Total Credit Load:<input type='text' value='' id='credit_load' name='credit_load' size='3' readonly/></p>
</form>
</body>
</html>
2 answers
solution1
1 ACCPTED 2015-02-09 15:01:23
Problem 1 - you need to initialise the counter variable in the for loop.
for(i = 0; i < len; ++i){
Problem 2 - the way you're trying to get an element using it's index is incorrect, you should be using the array of elements you grabbed at the top.
sum += parseInt(mutli_Credit[i].value, 10);
Problem 3 - you're not returning anything from your function so the page refreshes.
function calc(){
....
return false;
};
<BUTTON onClick='return calc()'> CALCULATE </BUTTON>
And remove the duplicate ids.
solution2
0 2015-02-09 15:09:31
Your code is full of mistakes. I fixed it for you to use as base
Add a class to all input elements you want to sum, never use the same ID to different elements and add a class to all inputs you want to sum;
MATH101 <input type='text' name='Credit0' value='3' id='Credit0' class="sumInput" size='3' readonly /><br/>
CSC201 <input type='text' name='Credit1' value='2' id='Credit1' class="sumInput" size='3' readonly /><br/>
EDU301 <input type='text' name='Credit2' value='2' id='Credit2' class="sumInput" size='3' readonly /><br/>
Retrieve all input elements
var mutli_Credit = document.getElementsByTagName("input");
Fix your for statement by initializing the variable
for(var i = 0; i < len; ++i){
Check if the element has the ID you gave them
if(mutli_Credit[i].className === "sumInput")
Sum the elements
sum += parseInt(mutli_Credit[i].value);
This is the fixed code:
// Addint an array of values from a text box
function calc(){
var mutli_Credit = document.getElementsByTagName("input");
var sum = 0, i = 0, len = mutli_Credit.length;
for(var i = 0; i < len; ++i){
if(mutli_Credit[i].className === "sumInput") {
sum += parseInt(mutli_Credit[i].value);
}
}
document.getElementById('credit_load').value = sum;
};
...
MATH101 <input type='text' name='Credit0' value='3' id='Credit0' class="sumInput" size='3' readonly /><br/>
CSC201 <input type='text' name='Credit1' value='2' id='Credit1' class="sumInput" size='3' readonly /><br/>
EDU301 <input type='text' name='Credit2' value='2' id='Credit2' class="sumInput" size='3' readonly /><br/>
<BUTTON onClick='calc()'> CALCULATE </BUTTON>
Total Credit Load:<input type='text' value='' id='credit_load' name='credit_load' size='3' readonly/></p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.