小编Ter*_*rgo的帖子

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

  <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= …