使用單選按鈕與JavaScript ...越來越空錯誤

Question

我所做的是，有4個單選按鈕，描述數學運算（添加，減去...），然後基於哪一個檢查，我會採取用戶輸入數字並執行計算。爲此，我使用了一個if else語句，以便它通過按鈕運行，如果它被選中，它將執行數學運算。我得到的問題是一個空錯誤。

的document.getElementById（...）爲空......如果（的document.getElementById（ '添加'）。選中）

我得到同樣的錯誤無論哪個單選按鈕被選中。 我的另一個問題是可以一次選擇多個單選按鈕。

我怎麼能這樣編碼，只有一個按鈕可以被選中，然後取決於哪個按鈕被檢查執行該操作？爲什麼我得到空錯誤？

我的印象是，如果單選按鈕被選中，那麼document.getElementById（'add'）。checked將返回true，否則它會返回false，移動到下一個語句。

HTML

<form> 
     Enter two numbers, select a math, click the button to see result. 
     Enter first number: <input type='number' id='num1'> 
     Enter second number: <input type='number' id='num2'>  
     <h5>Select a math</h5> 
     <input type='radio' name='add'>Add<br> 
     <input type='radio' name='sub'>Subtract<br> 
     <input type='radio' name='multi'>Multiply<br> 
     <input type='radio' name='divis'>Division<br> 
     <br> 
     <button type='button' onclick='calculate();'>Calculate</button> 
    </form> 
    <p id='result'></p> 
</div> 

的JavaScript

function calculate(){ 
    var num1 = document.getElementById('num1').value; 
    var num2 = document.getElementById('num2').value; 
    var res = document.getElementById('result').innerHTML; 

    if(document.getElementById('add').checked){ 
     res = num1 + num2; 
    }else if(document.getElementById('sub').checked){ 
     res = num1 - num2; 
    }else if(document.getElementById('multi').checked){ 
     res = num1 * num2; 
    }else if(document.getElementById('divis').checked){ 
     if(num2 == 0){ 
      alert('Can not divide by ZERO!!'); 
     }else{ 
      res = num1/num2; 
     } 
    }else{ 
     alert('please select a math'); 
    } 
} 

Answer 1

• 你需要投在每個輸入計算數
• 單選按鈕需要一個一致的名稱爲一組
• 你輸出到P的結果，則計算後着手

function calculate() { 
 
    var num1 = parseInt(document.getElementById('num1').value); 
 
    var num2 = parseInt(document.getElementById('num2').value); 
 
    var res; 
 

 

 
    if (document.getElementById('add').checked) { 
 
    res = num1 + num2; 
 
    } else if (document.getElementById('sub').checked) { 
 
    res = num1 - num2; 
 
    } else if (document.getElementById('multi').checked) { 
 
    res = num1 * num2; 
 
    } else if (document.getElementById('divis').checked) { 
 
    if (num2 == 0) { 
 
     alert('Can not divide by ZERO!!'); 
 
    } else { 
 
     res = num1/num2; 
 
    } 
 
    } else { 
 
    alert('please select an operation'); 
 
    } 
 
    document.getElementById('result').innerHTML = res 
 

 
}

<form> 
 
    Enter two numbers, select a math, click the button to see result. 
 
    <br/>Enter first number: 
 
    <input type='number' id='num1'> 
 
    <br/>Enter second number: 
 
    <input type='number' id='num2'> 
 
    <br/> 
 
    <h5>Select a math</h5> 
 

 
    <input type='radio' name='operation' id='add'>Add 
 
    <br> 
 
    <input type='radio' name='operation' id='sub'>Subtract 
 
    <br> 
 
    <input type='radio' name='operation' id='multi'>Multiply 
 
    <br> 
 
    <input type='radio' name='operation' id='divis'>Division 
 
    <br> 
 

 
    <br> 
 
    <button type='button' onclick='calculate();'>Calculate</button> 
 
</form> 
 
<p id='result'></p>

Answer 2

的按鈕是他們需要的所有具有相同的名稱是互斥的。

<input type='radio' name='operation' id='add'>Add<br> 
<input type='radio' name='operation' id='sub'>Subtract<br> 
<input type='radio' name='operation' id='multi'>Multiply<br> 
<input type='radio' name='operation' id='divis'>Division<br> 

由於您使用的是getElementById，但您沒有設置ID，所以出現此錯誤。將當前的name屬性更改爲id，並且現有的代碼應該可以工作。

Answer 3

「ID」和「name」在HTML中不是同一個元素。

嘗試修改成類似：

ID = '添加'

在您目前擁有

名= '添加'

Answer 4

給予幾個名字意味着幾個無線電投入，這也解釋了爲什麼有幾個可以檢查。 對於您的getElementById，您會得到一個空錯誤，因爲實際上不存在具有這種ID的元素。

嘗試

<input type="radio" name="math" id="add">

（相應地改變其它無線電元件）來代替，看看是否可以幫助你。

Answer 5

不添加ids也可以使用name也處理，但你需要to have same name to allow only one selection。一個凌亂的代碼使用getElementsByName。

<form> 
 
     Enter two numbers, select a math, click the button to see result. 
 
     Enter first number: <input type='number' id='num1'> 
 
     Enter second number: <input type='number' id='num2'>  
 
     <h5>Select a math</h5> 
 
     <input type='radio' name='radio'>Add<br> 
 
     <input type='radio' name='radio'>Subtract<br> 
 
     <input type='radio' name='radio'>Multiply<br> 
 
     <input type='radio' name='radio'>Division<br> 
 
     <br> 
 
     <button type='button' onclick='calculate();'>Calculate</button> 
 
    </form> 
 
    <p id='result'></p> 
 

 
<script> 
 
function calculate(){ 
 
    var num1 = parseFloat(document.getElementById('num1').value); 
 
    var num2 = parseFloat(document.getElementById('num2').value); 
 
    var radio = document.getElementsByName("radio"); 
 
    var res="N/A"; 
 
    var selected=true; 
 
    for(x in radio){  
 
    if(radio[x].checked && radio[x].nextSibling.data =='Add'){ 
 
     res = num1 + num2; 
 
     selected=true 
 
     break; 
 
    }else if(radio[x].checked && radio[x].nextSibling.data=='Subtract'){ 
 
     res = num1 - num2; 
 
     selected=true 
 
     break; 
 
    }else if(radio[x].checked && radio[x].nextSibling.data == 'Multiply'){ 
 
     res = num1 * num2; 
 
     selected=true 
 
     break; 
 
    }else if(radio[x].checked && radio[x].nextSibling.data == 'Division'){ 
 
     if(num2 == 0){ 
 
      alert('Can not divide by ZERO!!'); 
 
     }else{ 
 
      res = num1/num2; 
 
      
 
     } 
 
     selected=true 
 
     break; 
 
    }else{ 
 
     selected=false; 
 
    } 
 
    
 
} 
 

 
    if(!selected){ 
 

 
      alert('please select a math'); 
 
     } 
 

 
    document.getElementById('result').innerHTML=res; 
 
} 
 

 
</script>