Input.value返回NaN

Question

If someone can help me because I have no clue why I always have NaN in console. Everything seems to be ok. The code should get value of input and do simple calculations. Unfortunetely I've received NaN so I decided to use console.log to explore values and it explained me that value of every input is NaN. I think that solution is obvious but I am newbie and I have been wondering what is my mistake for 2 hours.

  <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

The fields don't have value attributes, so when you read them (which is as soon as the DOM is ready) their values are all "" .

When you try to convert "" into a Number , you get NaN because they are not numbers.

Don't try to read the value until the value has been entered (eg inside the function that handles the click event).

Answer 2

Add all the declaration inside the click event not with Global .Because document load its empty value so only you get NaN .And add or(|) condition ,if the variable is NaN its set as a Zero by default => 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

add the below lines of code in calculate.addeventlisterer. The width, height, etc will be calculated at the time of dom is ready. By that time no values present in the textboxes. Hence it returns 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

Best approach is to create an update function

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

and call that function onchange event of input fileds

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

Inside your click function make sure you have all defined before parsing

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>