onchange 事件不接受我的 javascript 代码

Question

我有两个文本输入供用户输入数字，我希望页面在另一个文本输入中输出这两个数字的总和

<input id="attendance_1" onchange="parseInt(document.getElementById('attendance_output').value) += parseInt(this.value);" type="text" name="attendance_1" value="" />

<input id="attendance_2" onchange="parseInt(document.getElementById('attendance_output').value) += parseInt(this.value);" type="text" name="attendance_2" value="" />

// The results of adding the two text values should go here
<input id="attendance_output" type="text" value="" />

我收到错误：

ReferenceError: invalid assignment left-hand side

Answer 1

我建议将 onchange 的代码放在一个函数中，然后只调用该函数 onclick。它使事情更容易调试。

例子

function addValue(field) {
    parseInt(document.getElementById('attendance_output').value) += parseInt(field.value);
}

<input id="attendance_1" onchange="addValue(this)" type="text" name="attendance_1" value="" />

<input id="attendance_2" onchange="parseInt(document.getElementById('attendance_output').value) += parseInt(this.value);" type="text" name="attendance_2" value="" />

// The results of adding the two text values should go here
<input id="attendance_output" type="text" value="" />

但问题是，你的计算没有分配给任何东西。您获取字段值，解析它并尝试将值赋给解析结果。

我猜你想将该值添加到字段值并分配它？！

function addValue(field) {
    var val = parseInt(document.getElementById('attendance_output').value);
    val += parseInt(field.value);
    document.getElementById('attendance_output').value = val;
}

Answer 2

试试下面的代码。它应该工作。您的代码无法正常工作，因为 += 登录表达式。

<input id="attendance_1" onchange="document.getElementById('attendance_output').value=parseInt(document.getElementById('attendance_output').value) + parseInt(this.value);" type="text" name="attendance_1" value="" />

<input id="attendance_2" onchange="document.getElementById('attendance_output').value=parseInt(document.getElementById('attendance_output').value) + parseInt(this.value);" type="text" name="attendance_2" value="" />

// The results of adding the two text values should go here
<input id="attendance_output" type="text" value="" />

Answer 3

所以这真的是带有类型检查的基本 JS

function addValue(field) {
    parseInt(document.getElementById('attendance_output').value) += parseInt(field.value);
}

<input id="attendance_1" onchange="addValue(this)" type="text" name="attendance_1" value="" />

<input id="attendance_2" onchange="parseInt(document.getElementById('attendance_output').value) += parseInt(this.value);" type="text" name="attendance_2" value="" />

// The results of adding the two text values should go here
<input id="attendance_output" type="text" value="" />

但问题是，你的计算没有分配给任何东西。您获取字段值，解析它并尝试将值赋给解析结果。

我猜你想将该值添加到字段值并分配它？！

function addValue(field) {
    var oVal = parseInt(document.getElementById('attendance_output').value);
    var iVal = parseInt(field.value);

    if(!oVal || Number.isNaN(oVal)) {
        oVal = 0;
    }

    if(!iVal || Number.isNaN(iVal)) {
        iVal = 0;
    }

    oVal = oVal + iVal;

    document.getElementById('attendance_output').value = oVal;
}

Answer 4

试试这个。 :) 如果用户输入字符串，它将无法正常工作，所以我认为它应该有验证。

function addValue() {
var num1 = document.getElementById('attendance_1').value;
var num2 = document.getElementById('attendance_2').value;
if (num1 === ''){
    num1 = 0;
}
if(num2 === ''){
    num2 = 0;
}

    var sum = parseInt(num1) + parseInt(num2);
  document.getElementById('attendance_output').value = sum;

}

您可以使用 jquery

让文本框只接受数字

$(document).ready(function() {
$("#attendance_1, #attendance_2").keydown(function (e) {
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
        (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) ||
        (e.keyCode >= 35 && e.keyCode <= 40)) {
             return;
    }
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
    });
});

Answer 5

在

中使用此代码

onchange="document.getElementById('attendance_output').value=+document.getElementById('attendance_output').value+ +this.value"

希望对你有用:)

Answer 6

这可能是一个选项。我完全删除了内联 JS。从 onchange 到 oninput 处理程序，如果给定的值实际上是数字而不是字符串，它只会进行计算。

var inpt = document.querySelectorAll('.attendance');
var out = document.getElementById('attendance_output');

var onInput = function(e) {
  if(/\d/.test(this.value)) {
    var sum = [].slice.call(inpt).reduce(function(a, b) {
      if (a.value.length && b.value.length) {
        return +a.value + +b.value;
      } else {
        return +a.value || +b.value;
      }
    })
    out.value = sum || this.value;
  } else {
    out.value = "";
  }
}

inpt.forEach(function(el) {
  el.addEventListener('input', onInput, false)
})

<input class="attendance" type="text" name="attendance_1" value="" /> <span>+</span>
<input class="attendance" type="text" name="attendance_2" value="" />

<br><br>
<input id="attendance_output" type="text" value="" disabled />

onchange 事件不接受我的 javascript 代码

onchange event not accepting my javascript code

javascript

onchange