Javascript:读取，添加和显示表单值

Javascript: Read, Add and Display form values

本文关键字：显示 表单 添加 读取 Javascript      更新时间：2023-09-26

我正在尝试编写一个 Web 应用程序，该应用程序将用户输入作为 15 个文本中的数字或 html 表单上的数字输入，然后它应该将这些值加在一起并在页面上其他位置的标签中显示总计。

我有 15 个输入，类名为"takeings"，页面上有一个 ID 为"TotalLabel"的标签。

function getsum () {
    var rows = document.getElementsByClassName("takings");
    var total = 0;
    for (var i = 0; i < rows.length; i++) {
        var val = parseFloat(rows[i].value);
        total += val;
    }
    var label = document.getElementById("TotalLabel");
    label.value = total;
    alert(parseFloat(total));
}
window.onload = getsum;

警报仅用于调试目的，并且似乎变量总计在脚本末尾仍设置为零。我还需要使 getsum() 函数在每次用户在具有类"takeings"的任何字段中输入数据时触发。

谁能帮忙？

因此，您需要向所有元素添加更改事件并调用getsum 

function getsum () {
    var rows = document.getElementsByClassName("takings");
    var total = 0;
    for (var i = 0; i < rows.length; i++) {
        var val = parseFloat(rows[i].value);
        total += val;
    }
    var label = document.getElementById("TotalLabel");
    label.value = total;
}
window.onload = getsum;
//Example showing how to add one event listener to the page and listen for change events
//The following works in modern browsers, not all browsers support addEventListener, target, and classList. 
document.body.addEventListener("change", function(evt) {  
   var targ = evt.target;
   if(targ.classList.contains("takings")) {
      getsum();
   }
});
label { display: block; }
<label>1</label><input type="text" class="takings" value="0"/>
<label>2</label><input type="text" class="takings" value="0"/>
<label>3</label><input type="text" class="takings" value="0"/>
<label>4</label><input type="text" class="takings" value="0"/>
<label>5</label><input type="text" class="takings" value="0"/>
<label>Total:</label><input type="text" id="TotalLabel" value="0" readonly/>

要让getSum()函数为所有这些元素触发，您可以使用 Javascript 向具有所需类名的所有元素添加一个 onchange 事件

var input = document.getElementsByClassName("takings"); 
for (var i = 0; i < cells.length; i++) { 
   input[i].onchange = getSum;
}

除此之外，我在getSum()函数中没有看到任何可见的错误。

例如，您需要将 EventListener 添加到输入字段并调用 getsum

。 
var a = document.getElementsByClassName("takings");
for (var i = 0;i<a.length;i++){
    addEventListener('keyup',getsum);
}

请注意，标签包含 innerHTML，而不是值：

label.innerHTML = total;

使用您的实际函数，只要并非所有输入都有值，您就会得到 NaN，因此您需要添加 

 if (val) {
      total += val;
    }

到你的 for 循环。

完整工作代码：

function getsum(){
    var rows = document.getElementsByClassName("takings");
    var total = 0;
for (var i =0; i < rows.length; i++){
    var val = parseFloat(rows[i].value);
    if (val) {
    console.log(val);
    total += val;
    }}
var label = document.getElementById("TotalLabel");
label.innerHTML = total;
}

var a = document.getElementsByClassName("takings");
for (var i = 0;i<a.length;i++){
    this.addEventListener('keyup',getsum);
}

演示

相关文章：