Question

我正在尝试使用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中的错误还是两者都有？

Answer 1

<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：）

Answer 2

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

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

2 个答案: