如何在 JavaScript 中定义文本字段和单选按钮侦听器答案

【问题标题】：How to define textfield and radio button listeners in JavaScript如何在 JavaScript 中定义文本字段和单选按钮侦听器
【发布时间】：2013-11-07 05:35:17
【问题描述】：

所以对于一个课堂项目，我必须制作这个简单的计算器，这很容易做到。但是，我需要在 JavaScript 中定义我的事件侦听器，而不是使用类似的东西： onclick="计算()"

但每当我更改字段中的值或选择任何单选按钮时，我都需要更新计算器的结果。我怎样才能做到这一点？我现在的代码不起作用。

<script>
function compute(){
    var functionSelected = document.getElementsByName("function");
    var valueOne = Number(document.getElementById("fielda").value);
    var valueTwo = Number(document.getElementById("fieldb").value);
    var ans = 0;
    if(functionSelected[0].checked){
        ans = (valueOne+valueTwo);
    }
    if(functionSelected[1].checked){
        ans = (valueOne-valueTwo);
    }
    if(functionSelected[2].checked){
        ans = (valueOne*valueTwo);
    }
    if(functionSelected[3].checked){
        ans = (valueOne/valueTwo);
    }
    if(ans>=9007199254740992){
        document.getElementById("solution").textContent = "ERROR NUMBER TO LARGE TO BE COMPUTED";
    }
    else{
        document.getElementById("solution").textContent = "Equals: " + ans;
    }
}

document.getElementById("fielda").addEventListener("change", compute(), false);
document.getElementById("fieldb").addEventListener("change", compute(), false);
document.getElementByName("function").onclick = compute();
</script>

</head>
<body>
    <p>
    <input type="number" id="fielda"/><br />
    <input type="number" id="fieldb"/><br />
    <label><input name="function" type="radio" value="add"/> Add</label><br />
    <label><input name="function" type="radio" value="subtract"/> Subtract</label><br />
    <label><input name="function" type="radio" value="multiply"/> Multiply</label><br />
    <label><input name="function" type="radio" value="divide"/> Divide</label><br />
    </p>
    <p>
    <output id="solution">Solution Will Appear Here</output>
    </p>
</body>

【问题讨论】：

.addEventListener("change", compute, false)。函数参考VS函数调用。
相关：http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text
你能说得更具体点吗？如果我只是改变它，它仍然不起作用。
compute 是一个函数对象。compute() 执行compute 函数并返回其值（未定义）。您需要将函数作为回调传递，而不是函数返回的内容。

标签： javascript html radio-button listener addeventlistener

【解决方案1】：

你可以使用

<select ... onchange="javascript:compute();">

您可以使用很多事件来响应不同的事件，具体取决于控件。

它们被命名为onmouseover、onclick、onchange 等，您可以根据需要为每个函数分配一个 javascript 函数。

另一种选择是使用以下语法：

document.getElementById("id_of_select_control").onchange = function() {
    // your code here
}

或者如果你在你的项目中使用 jQuery，像这样：

$("#id_of_select_control").change(function() {
    // your code here
});

【讨论】：

您介意扩展这个答案吗？我想我很接近使用： document.getElementById("fielda").onchange = compute;但这不起作用？
我无法添加任何我拥有的 html，它只能是 JavaScript。
对于那个特定的部分，这是一个被问了很多次的常见问题。我不会重新发明轮子。看这里：stackoverflow.com/questions/2554149/…