Question

我需要总结四个输入文本值，但没有任何工作。这是我正在尝试的代码：

<script>
    var uno    = document.getElementsByName('base')[0];
    var dos = document.getElementsByName('bonos')[0];
    var tres     = document.getElementsByName('salud')[0];
    var cuatro    = document.getElementsByName('afp')[0];
    var cinco   = document.getElementsByName('bruto')[0];

    function updateInput() {
        cinco.value = parseFloat(uno.value) + parseFloat(dos.value) + parseFloat(tres.value) + parseFloat(cuatro.value);
    }

    cinco.addEventListener('change', updateInput);
    cinco.addEventListener('keyup', updateInput);
</script>

输入文本的名称是正确的，但总和不是解析。有任何想法吗？输入CINCO必须对来自uno，dos，tres和cuatro的值求和，但它仅显示0。

Answer 1

除了绑定到错误元素的事件之外，我怀疑你的问题是关于脚本的执行。尝试更新到

<script>
window.onload = function(){
    var uno    = document.getElementsByName('base')[0];
    var dos = document.getElementsByName('bonos')[0];
    var tres     = document.getElementsByName('salud')[0];
    var cuatro    = document.getElementsByName('afp')[0];
    var cinco   = document.getElementsByName('bruto')[0];

    function updateInput() {
        cinco.value = parseFloat(uno.value) + parseFloat(dos.value) + parseFloat(tres.value) + parseFloat(cuatro.value);
    }

    // update event listeners here
    uno.addEventListener('change', updateInput);
    uno.addEventListener('keyup', updateInput);

   // ... similarly add listeners for other elements as well.
};
</script>

注意：我建议您绑定updateInput中的onchange函数和标记中的onkeyup

e.g。

<input type="text" onchange="updateInput()" onkeyup="updateInput" name="base"/>

Answer 2

无论字段是空白还是输入都不是数字，这都有效，并在输入4个输入中的任何一个后触发总和。

var uno = document.getElementsByName('base')[0];
var dos = document.getElementsByName('bonos')[0];
var tres = document.getElementsByName('salud')[0];
var cuatro = document.getElementsByName('afp')[0];
var cinco = document.getElementsByName('bruto')[0];

function getInputVal(inVal){
    return isNaN(parseFloat(inVal)) ? 0 : parseFloat(inVal);
}

function updateInput() {

    var unoVal = getInputVal(uno.value),
        dosVal = getInputVal(dos.value),
        tresVal = getInputVal(tres.value),
        cuatroVal = getInputVal(cuatro.value);

    cinco.value = unoVal + dosVal + tresVal + cuatroVal;
}

uno.addEventListener('keyup', updateInput);
dos.addEventListener('keyup', updateInput);
tres.addEventListener('keyup', updateInput);
cuatro.addEventListener('keyup', updateInput);

这是一个小提琴：https://jsfiddle.net/bm6f97zs/1/

总结我的HTML输入文本是行不通的

2 个答案: