javascript - 使用 JavaScript 中的条件以 HTML 格式打印消息

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

要改进代码，您可以添加 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>