Question

目前我正在开发我的第一个Javascript HTML应用程序。现在我想介绍一个if语句。但是，这不起作用。有人可以向我解释我做错了什么以及如何解决这个问题？

非常感谢提前

<html>
<style type="text/css">
    label {
    text-align: left;
    width: 200px;
    display: block;
    float: left;
    clear: left;
    margin-right: 3px;
    cursor: pointer;
    font: normal 16px ventura;
    color: white  
    }
    .button{
    width: 95px;
    font: normal 16px ventura;
    margin-right: 3px;
    margin-bottom: 3px;
    }
    .print{
    width: 350px;
    height: 200px; 
    var x = document.getElementById("Vectorlength").value;
    document.getElementById("demo").innerHTML = x;
    }
</style>
<body bgcolor= "#119ed8">
    <form id="form1">
        <p><label for="Vectorlength">Vector length (bp):</label> 
        <input type="text" name="Vectorlength" value="" />
        </p>
        <p><label for="Vectormass">Vector mass (ng):</label> 
        <input type="text" name="Vectormass" value="" />
        </p>
        <p><label for="Vectorconcentration">Vector concentration (ng/µL):</label> 
        <input type="text" name="Vectorconcentration" value="" />
        </p>
        <p><label for="Insertlength">Insert length (bp):</label> 
        <input type="text" name="Insertlength" value="" />
        </p>
        <p><label for="Insertconcentration ">Insert concentration (ng/µL):</label> 
        <input type="text" name="Insertconcentration" value="" />
        </p>
        <p><label for="Ratio">Ratio Insert/Vector:</label> 
        <input type="text" name="Ratio" value="3" />
        </p>
    </form>
    <button onclick="outputname()">Submit</button>
    <script>
        function outputname() {
            var x,y,name,a,b,answer, L,M;
            x=document.getElementById("form1") ;
            L=x.elements["Vectorlength"].value;
            M=x.elements["Vectormass"].value;
            C=x.elements["Vectorconcentration"].value;
            iL=x.elements["Insertlength"].value;
            iC=x.elements["Insertconcentration"].value;
            R=x.elements["Ratio"].value;

            y=Number(L)+Number(M);

            if (y==NaN)
            document.getElementById("demo").innerHTML+=" is not valid! <br>";

            else
            document.getElementById("demo").innerHTML=+y+"<br>";
        }
    </script>
    <p id="demo"></p>
</body>
</html>

Answer 1

我的代码有一个工作的jsfiddle：

https://jsfiddle.net/hyLL7t1v/1/

我修复了isNaN比较：

if (isNaN(y)) {
    document.getElementById("demo").innerHTML += " is not valid! <br>";
} else {
    document.getElementById("demo").innerHTML = y+"<br>";
}

这里要注意几点：

Js fiddle设置为在DOM上运行就绪。由于您与DOM有很多交互，我建议将您的javascript包装在DOMReady函数中。或者，将其作为脚本标记或外部文件加载为正文中的最后一行也将以相同的方式工作。
如果您针对NaN检查任何内容，它将返回false，包括NaN。请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN和https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/isNaN
请不要将javascript放在样式标记中。这会引发错误。

我还从样式标记中删除了javascript。

Answer 2

使用全局isNaN（）函数

if (isNaN(y)) { ... }

info on the isNaN() function

如果声明没有捕捉到NaN

2 个答案: