Question

我使用HTML和JavaScipt创建了一个计算器。计算器可以工作，所以很好。但是，我想在html中编写一条消息，让用户知道他们必须输入变量（如果结果是NaN）。虽然我知道我需要使用条件语句，但是我不确定如何编写它。

这是我的代码：

function calc(){
        var n1 = parseFloat(document.getElementById("n1").value);
        var n2 = parseFloat(document.getElementById("n2").value);
        var oper = document.getElementById("operators").value;

        if( oper === "+"){
            document.getElementById("result").value = n1+n2;
        }
        if( oper === "-"){
            document.getElementById("result").value = n1-n2;
        }
        if( oper === "*"){
            document.getElementById("result").value = n1*n2;
        }
        if( oper === "/"){
            document.getElementById("result").value = n1/n2;
        }
        if( oper === NaN ){
            document.getElementById("Comments").innerHTML= "Write something in the boxes, you silly ass." ;
        }
     }

<input type="text" id="n1"/><br/><br/>
<input type="text" id="n2"/><br/><br> 

<select id="operators">
    <option value="+">+</option> 
    <option value="-">-</option> 
    <option value="X">X</option> 
    <option value="/">/</option> 
</select>

<input type="text" id="result"/> 
 <button onclick="calc();">=</button>
<p id="Comments"></p>

Answer 1

使用isNaN函数进行检查

    function calc(){
        var n1 = parseFloat(document.getElementById("n1").value);
        var n2 = parseFloat(document.getElementById("n2").value);
        var oper = document.getElementById("operators").value;

        if( oper === "+"){
            document.getElementById("result").value = n1+n2;
        }
        if( oper === "-"){
            document.getElementById("result").value = n1-n2;
        }
        if( oper === "*"){
            document.getElementById("result").value = n1*n2;
        }
        if( oper === "/"){
            document.getElementById("result").value = n1/n2;
        }
        if( isNaN(oper) ){
            document.getElementById("Comments").innerHTML= "Write something in the boxes, you silly ass." ;
        }
     }

<input type="text" id="n1"/><br/><br/>
<input type="text" id="n2"/><br/><br> 

<select id="operators">
    <option value="+">+</option> 
    <option value="-">-</option> 
    <option value="X">X</option> 
    <option value="/">/</option> 
</select>

<input type="text" id="result"/> 
 <button onclick="calc();">=</button>
<p id="Comments"></p>

Answer 2

要改善代码，您可以添加else if和isNaN，如下所示：

function calc(){
        var n1 = parseFloat(document.getElementById("n1").value);
        var n2 = parseFloat(document.getElementById("n2").value);
        var oper = document.getElementById("operators").value;

        if( oper === "+"){
            document.getElementById("result").value = n1+n2;
        } else if( oper === "-"){
            document.getElementById("result").value = n1-n2;
        } else if( oper === "*"){
            document.getElementById("result").value = n1*n2;
        } else if( oper === "/"){
            document.getElementById("result").value = n1/n2;
        } else if( isNaN(oper) ){
            document.getElementById("Comments").innerHTML= "Write something in the boxes, you silly ass." ;
        }
     }

<input type="text" id="n1"/><br/><br/>
<input type="text" id="n2"/><br/><br> 

<select id="operators">
    <option value="+">+</option> 
    <option value="-">-</option> 
    <option value="X">X</option> 
    <option value="/">/</option> 
</select>

<input type="text" id="result"/> 
 <button onclick="calc();">=</button>
<p id="Comments"></p>

Answer 3

我将提供其更简洁的版本。如果您打算以后进行更改，则没有理由多次选择一个元素。将对象用作选项的容器，使您可以更轻松地进行验证和执行。

const options = {
  '+'(a, b) { return a + b },
  '-'(a, b) { return a - b },
  '*'(a, b) { return a * b },
  '/'(a, b) { return a / b }
};
function calc(){
  var n1 = parseFloat(document.getElementById("n1").value);
  var n2 = parseFloat(document.getElementById("n2").value);
  var oper = document.getElementById("operators").value;
  const resEl = document.getElementById("result");
  resEl.value = '';
  const comEl = document.getElementById("Comments");
  comEl.innerHTML = '';

  let result;
  let targetEl;

  if (isNaN(n1) || isNaN(n2)) {
    targetEl = comEl;
    result = "Write something valid in the boxes, silly.";
  }
  else if (options[oper]) {
    target = resEl;
    result = options[oper](n1, n2);
  }
  else {
    targetEl = comEl;
    result = "Pick an operation." ;
  }

  let prop = typeof result === 'string' ? 'innerHTML' : 'value';
  targetEl[prop] = result;

}

在JavaScript中使用条件语句以HTML打印消息

3 个答案: