使用 Javascript 动态添加文本框的值
Add the Values of Text boxes dynamically with Javascript
我希望在单击按钮时得到总和,但没有任何反应。然而,这是我想要使用的代码的简化版本。文本框的值实际上是使用 php 从数据库中查询的。请F1。这是完整的代码。
<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>
问题 1 - 您需要在 for 循环中初始化计数器变量。
for(i = 0; i < len; ++i){
问题 2 - 您尝试使用索引获取元素的方式不正确,您应该使用在顶部获取的元素数组。
sum += parseInt(mutli_Credit[i].value, 10);
问题 3 - 您没有从函数返回任何内容,因此页面刷新。
function calc(){
....
return false;
};
<BUTTON onClick='return calc()'> CALCULATE </BUTTON>
并删除重复的 ID。
你的代码错误百出。我修好它作为基础
为所有要求和的输入元素添加一个class,永远不要对不同的元素使用相同的ID,并为所有要求和的输入添加一个class;
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/>
检索所有输入元素
var mutli_Credit = document.getElementsByTagName("input");
通过初始化变量修复您的 for 语句
for(var i = 0; i < len; ++i){
检查元素是否具有您提供的 ID
if(mutli_Credit[i].className === "sumInput")
对元素求和
sum += parseInt(mutli_Credit[i].value);
这是固定码:
// 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>
我希望在单击按钮时得到总和,但没有任何反应。然而,这是我想要使用的代码的简化版本。文本框的值实际上是使用 php 从数据库中查询的。请F1。这是完整的代码。
<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>
问题 1 - 您需要在 for 循环中初始化计数器变量。
for(i = 0; i < len; ++i){
问题 2 - 您尝试使用索引获取元素的方式不正确,您应该使用在顶部获取的元素数组。
sum += parseInt(mutli_Credit[i].value, 10);
问题 3 - 您没有从函数返回任何内容,因此页面刷新。
function calc(){
....
return false;
};
<BUTTON onClick='return calc()'> CALCULATE </BUTTON>
并删除重复的 ID。
你的代码错误百出。我修好它作为基础
为所有要求和的输入元素添加一个class,永远不要对不同的元素使用相同的ID,并为所有要求和的输入添加一个class;
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/>
检索所有输入元素
var mutli_Credit = document.getElementsByTagName("input");
通过初始化变量修复您的 for 语句
for(var i = 0; i < len; ++i){
检查元素是否具有您提供的 ID
if(mutli_Credit[i].className === "sumInput")
对元素求和
sum += parseInt(mutli_Credit[i].value);
这是固定码:
// 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>