Input.value返回NaN

Question

如果有人可以幫助我，因為我不知道為什么我總是在控制台中使用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;
    });

});

Answer 1

字段沒有value屬性，因此當您讀取它們（DOM准備就緒時）時，它們的值都是"" 。

當您嘗試將""轉換為數字時 ，會得到NaN因為它們不是數字。

在輸入值之前，請勿嘗試讀取該值（例如，在處理click事件的函數內部）。

Answer 2

將所有聲明添加到click事件中，而不要使用Global。因為文檔加載了空值，所以只有NaN。並添加or(|)條件，如果變量為NaN ，則默認將其設置Zero => value|0

 document.addEventListener("DOMContentLoaded", function(event) { calculate.addEventListener("click", function() { var width = parseInt(document.getElementById("width").value|0); var height = parseFloat(document.getElementById("height").value|0); var price = parseFloat(document.getElementById("price").value|0); var surface = parseFloat(document.getElementById("surface").value|0); var calculate = document.getElementById("calculate"); var result = document.getElementById("result"); 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; }); }); 

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

Answer 3

將以下代碼行添加到calculate.addeventlisterer中。 寬度，高度等將在dom准備就緒時進行計算。 到那時，文本框中沒有任何值。 因此它返回NAN

    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");

Answer 4

最好的方法是創建更新功能

var update = function(elm,id){
        if(id=='width'){
           width = parseInt(elm.value);
        }else if(id=='height'){
           height= parseFloat(elm.value)
        }else if(id=='price'){
           price = parseFloat(elm.value)
        }else if(id=='surface'){
           surface= parseFloat(elm.value)
        }
     }

並在輸入字段中調用該函數的onchange事件

   <input id=width type="number" onchange="update(this,this.id)" />

在click函數中，請確保在解析之前已定義所有內容

if(!width||!height||!price||!surface) return;

SNIPPET

 var width; var height; var price; var surface; var calculate; var result; var update = function(elm, id) { if (id == 'width') { width = parseInt(elm.value); } else if (id == 'height') { height = parseFloat(elm.value) } else if (id == 'price') { price = parseFloat(elm.value) } else if (id == 'surface') { surface = parseFloat(elm.value) } } document.addEventListener("DOMContentLoaded", function(event) { calculate = document.getElementById("calculate"); result = document.getElementById("result"); calculate.addEventListener("click", function() { if (!width || !height || !price || !surface) return; 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; }); }); 

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