使用带有javascript的单选按钮..获取null错误

using radio buttons with javascript... getting null error

本文关键字：单选按钮 获取 null 错误 javascript      更新时间：2023-09-26

我正在尝试做的是，有4个单选按钮来描述数学运算（加法、减法…），然后根据选中的一个，我将获取用户输入的数字并执行计算。为了做到这一点，我使用了一个if-else语句，这样它就可以通过按钮运行，如果选中了它，它就会执行数学运算。我遇到的问题是一个空错误。

document.getElementById（…）为null。。。if（document.getElementById（'add'）.checked）

无论选择哪个单选按钮，我都会遇到同样的错误。我的另一个问题是可以同时选择多个单选按钮。

我如何对其进行编码，以便只能选择一个按钮，然后根据选中的按钮执行该操作？为什么我会得到null错误？

我的印象是，如果选择了单选按钮，那么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');
    } 
}
  • 您需要在每次输入计算中强制转换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>

"ID"answers"name"在HTML中不是同一个元素。

尝试修改为以下内容：

id="添加"

您当前拥有的位置

name="添加"

给出几个名称意味着几个无线电输入，这解释了为什么可以检查几个。您的getElementById会得到一个null错误，因为事实上，不存在具有此id的元素。

尝试

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

（相应地更改其他无线电元件），看看这是否对你有帮助。

要使按钮互斥，它们必须具有相同的名称。

<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，现有的代码就可以工作了。

不添加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>

相关文章：