從四個輸入字段中查找總數或平均值，並在另一個輸入字段中顯示數值

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