使用 Javascript 动态添加文本框的值答案

【问题标题】：Add the Values of Text boxes dynamically with Javascript使用 Javascript 动态添加文本框的值
【发布时间】：2015-02-09 14:49:12
【问题描述】：

我希望在单击按钮时得到总和，但没有任何反应。然而，这是我想要使用的代码的简化版本。文本框的值实际上是使用 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>

【问题讨论】：

不同元素不能有相同的id，是无效的html。这不是你的问题的原因，但这是不好的做法。
同一个ID，相信你的意思
@DoctorMick 这根本不是真的；重复使用“名称”值是完全可以的。它实际上取决于服务器端框架。现在，重新使用“id”值，这很糟糕。
你的代码充满了错误。您的 for 子句不完整，您正在打开字符串而不是关闭并且缺少连接
一定是半睡半醒，我是说id。

标签： javascript arrays dynamic textbox add

【解决方案1】：

问题 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。

【讨论】：

【解决方案2】：

您的代码充满了错误。我修复了它供您用作基础

为所有要求和的输入元素添加一个类，切勿对不同的元素使用相同的 ID，并为所有要求和的输入添加一个类；

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 自动回显，而且会在提交时发布到 php 脚本