使用帶有javascript的單選按鈕...得到空錯誤

Question

我正在嘗試做的是，有 4 個單選按鈕來描述數學運算（加、減...），然后根據選中的那個，我將獲取用戶輸入的數字並執行計算。 為此，我使用了 if else 語句，以便它通過按鈕運行，如果選中它，它將執行數學運算。 我遇到的問題是空錯誤。

document.getElementById(...) 為 null...if(document.getElementById('add').checked)

無論選擇哪個單選按鈕，我都會收到同樣的錯誤。 我遇到的另一個問題是可以一次選擇多個單選按鈕。

我該如何編碼以便只能選擇一個按鈕，然后根據選中的按鈕執行該操作？ 為什么我收到空錯誤？

我的印象是，如果選擇了單選按鈕，則 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

要使按鈕互斥，它們需要具有相同的名稱。

<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 2

“ID”和“name”在 HTML 中不是同一個元素。

嘗試修改為：

id='添加'

您目前擁有的

名稱='添加'

Answer 3

給出多個名稱意味着多個無線電輸入，這解釋了為什么可以檢查多個名稱。 您的 getElementById 會收到空錯誤，因為實際上不存在具有此類 ID 的元素。

嘗試

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

（相應地更改其他無線電元素），看看是否對您有幫助。

Answer 4

• 您需要在每個輸入計算上投射 Number
• 單選按鈕需要一個一致的名稱才能作為一個組工作
• 然后在計算后設置您對 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 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>