Input.value返回NaN

Question

如果有人可以帮助我，因为我不知道为什么我总是在控制台中使用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= 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，因为它们不是数字。

尝试读取值，直到输入值为止（例如，在处理点击事件的函数内）。

Answer 2

在click事件中添加所有声明而不是Global.Because文档加载其空值，只有你得到NaN。并添加or(|)条件，如果变量是NaN，则设置为{ {1}}默认情况下=＆gt; Zero

＆＃13;

＆＃13;

value|0

＆＃13;

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

});

＆＃13;

＆＃13;

＆＃13;

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

在点击功能中，确保在解析之前已经定义了所有内容

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

<强>段

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;