Question

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

我有15个输入，其中包含了班级名称＆＃34; takings＆＃34;以及ID为＃34; TotalLabel＆＃34;在页面上。

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;

警报仅用于调试目的，并且看起来在脚本结尾处变量total仍设置为零。每当用户在任何带有类＆＃34; takings＆＃34;的字段中输入数据时，我还需要激活getsum()函数。

有人可以帮忙吗？

Answer 1

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

＆＃13;

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();
   }

});

＆＃13;

label { display: block; }

＆＃13;

<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/>

＆＃13;

Answer 2

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

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

除此之外，我在getSum()函数中看不到任何明显错误。

Answer 3

您需要将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);
}

DEMO

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

3 个答案: