从四个输入字段中查找总计或平均值，并在另一个输入字段中显示值

Finding the total or average from four input fields and displaying the value in another input field

本文关键字：输入 字段 平均值 显示 另一个 查找 四个      更新时间：2023-09-26

>我正在尝试使用 JS 从输入字段中获取四个数字的总和或平均值，然后在另一个文本字段中显示它。有一个单选按钮可以选择是要显示的总数还是平均值。

这是我的表单 html：

<form name="calculate">
Mark: <input type="number" name="number" id="num1"><br>
Mark: <input type="number" name="number" id="num2"><br>
Mark: <input type="number" name="number" id="num3"><br>
Mark: <input type="number" name="number" id="num4"><br>
<input type="radio" id="numTotal" name="choice" value="total">Find total</input>
<input type="radio" id="numAvg" name="choice" value="average">Find average</input>
<br>
<input type="submit" form="calculate" value="Submit" onclick="calculate();">
<input type="reset" form="calculate" value="Reset">
<br>
Result: <input type="text" name="result" id="result" value="" disabled>
</form>

下面是我的JS代码：

function calculate(){
var arr = document.getElementsByName("number");
var tot = 0;
var av = 0;
for(var i = 0; i < arr.length; i++) {
    if(parseInt(arr[i].value)){
            tot += parseInt(arr[i].value);
    }
}
av = tot/arr.length;
if(document.getElementById("numTotal").checked) {
    document.calculate.getElementbyId("result").value = tot;
}
if(document.getElementById("numAvg").checked) {
    document.getElementbyId("result").value = av;
}
}

运行此操作后，结果输入字段不显示输入。错误是在我的脚本中还是在 html 中，还是两者兼而有之？

<script type="text/javascript">
    function calculateFunc() {
        var arr = document.getElementsByName("number");
        var tot = 0;
        var av = 0;
        for (var i = 0; i < arr.length; i++) {
            if (parseInt(arr[i].value)) {
                tot += parseInt(arr[i].value);
            }
        }
        av = tot / arr.length;
        if (document.getElementById("numTotal").checked) {
            document.getElementById("result").value = tot;
        }
        if (document.getElementById("numAvg").checked) {
            document.getElementById("result").value = av;
        }
        return false;
    }
</script>
<div class="form">
<form name="calculate">
Mark: <input type="number" name="number" id="num1"><br>
Mark: <input type="number" name="number" id="num2"><br>
Mark: <input type="number" name="number" id="num3"><br>
Mark: <input type="number" name="number" id="num4"><br>
<input type="radio" id="numTotal" name="choice" value="total">Find total</input>
<input type="radio" id="numAvg" name="choice" value="average">Find average</input>
<br>
<br>
Result: <input type="text" name="result" id="result" value="" disabled>
</form>
<input type="submit" value="Submit" onclick="calculateFunc();">
<input type="reset" value="Reset">
</div>

这在Chrome:)中为我工作

document.calculate.getElementbyId("result").value = tot;
if(document.getElementById("numTotal").checked) {
    document.calculate.getElementbyId("result").value = tot;
}
if(document.getElementById("numAvg").checked) {
    document.getElementbyId("result").value = av;
}

需要更换

 document.getElementbyId("result").value = tot;
 if(document.getElementById("numTotal").checked) {
     document.calculate.getElementById("result").value = tot;
 }
 if(document.getElementById("numAvg").checked) {
     document.getElementById("result").value = av;
 }
相关文章：