输入值返回 NaN

如果有人可以帮助我，因为我不知道为什么控制台中总是有 NaN 。一切似乎都很好。 该代码应该获取输入值并进行简单的计算。不幸的是，我收到了 NaN，所以我决定使用 console.log 来探索值，它向我解释了每个输入的值都是 NaN。 我认为这个解决方案是显而易见的，但我是新手，两个小时以来我一直想知道我的错误是什么。

  <div id="wrapper">
        <section>
            <h2>Give width of tile</h2>
            <input id =width type="number"/>
            <h2>Give height of tile</h2>
            <input id =height type="number"/>
            <h2>Price of one tile</h2>
            <input id =price type="number"/>
        </section>
        <section>
            <h2>Surface</h2>
            <input id = "surface" type="number"/>
            <button id="calculate">Calculate</button>
        </section>
        <section>
            <p>The price is:</p>
            <div id="result">

            </div>
        </section>

    </div>   

    <script src="main.js"></script>

JS

   document.addEventListener("DOMContentLoaded", function(event) { 

    var width = parseInt(document.getElementById("width").value);
    var height = parseFloat(document.getElementById("height").value);
    var price= parseFloat(document.getElementById("price").value);
    var surface= parseFloat(document.getElementById("surface").value);
    var calculate= document.getElementById("calculate");
    var result= document.getElementById("result");



    calculate.addEventListener("click", function(){

        console.log(width);
        console.log(height);
        console.log(price);
        console.log(surface);

        var surfaceTile = parseFloat(width * height);
        price = parseFloat(price).toFixed(2);

        var numberTiles = (Math.ceil(surface/surfaceTile)).toFixed(2);
        var cost = numberTiles * price;
        result.innerText = cost;
    });

});

字段没有value属性，因此当您读取它们时（即 DOM 准备就绪），它们的值都是"".

当你尝试转换时"" into a Number， 你得到NaN因为它们不是数字。

在输入值之前不要尝试读取该值（例如，在处理单击事件的函数内）。