Question

我正在尝试做的是，有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');
    } 
}

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

＆＃34; ID＆＃34;和＆＃34;名称＆＃34;与HTML中的元素不同。

尝试修改为：

ID =＆＃39;添加＆＃39;

你当前有

的地方

名=＆＃39;添加＆＃39;

Answer 3

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

尝试

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

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

Answer 4

您需要在每个输入计算上转换数字
单选按钮需要一致的名称才能作为一个组使用
然后在计算后设置输出到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>

使用带有javascript的单选按钮...得到null错误

5 个答案: