Javascript Input.value返回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>

---

这些字段没有

value

属性，因此当您读取它们时（在DOM准备好之后），它们的值都是

”

当您尝试将

“

转换为数字时，会得到

NaN

，因为它们不是数字

---

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

在单击事件中添加所有声明，而不是使用全局。因为文档加载其空值，所以只有您获得NaN。并添加

或（|）条件，如果变量为
NaN
则其默认设置为
0


document.addEventListener（“DOMContentLoaded”），函数（事件）{
calculate.addEventListener（“单击”，函数（）{
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（“计算”）；
var result=document.getElementById（“结果”）；
控制台。原木（宽度）；
控制台。原木（高度）；
控制台日志（价格）；
控制台。原木（表面）；
var surfaceTile=parseFloat（宽*高）；
price=parseFloat（price）.toFixed（2）；
var numberTiles=（Math.ceil（surface/surfaceTile））.toFixed（2）；
风险价值成本=数量*价格；
result.innerText=成本；
});
});

给出瓷砖的宽度
给出瓷砖的高度
一块砖的价格
表面
算计
价格为：

在calculate.addEventLister中添加以下代码行。宽度、高度等将在dom准备就绪时计算。到那时，文本框中没有值。因此它返回南

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

最好的方法是创建一个更新函数

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

并在输入文件的更改事件中调用该函数

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

片段


var宽度；
变异高度；
var价格；
var曲面；
var计算；
var结果；
变量更新=函数（elm，id）{
如果（id=‘宽度’）{
宽度=parseInt（elm.value）；
}否则，如果（id=‘高度’）{
高度=解析浮点（elm.value）
}否则如果（id='price'）{
价格=parseFloat（elm.value）
}else if（id=='surface'）{
曲面=解析浮点（elm.value）
}
}
document.addEventListener（“DOMContentLoaded”），函数（事件）{
calculate=document.getElementById（“计算”）；
结果=document.getElementById（“结果”）；
calculate.addEventListener（“单击”，函数（）{
如果（！宽度| | |！高度| |！价格| |！表面）返回；
控制台。原木（宽度）；
控制台。原木（高度）；
控制台日志（价格）；
控制台。原木（表面）；
var surfaceTile=parseFloat（宽*高）；
price=parseFloat（price）.toFixed（2）；
var numberTiles=（Math.ceil（surface/surfaceTile））.toFixed（2）；
风险价值成本=数量*价格；
result.innerText=成本；
});
});

给出瓷砖的宽度
给出瓷砖的高度
一块砖的价格
表面
算计
价格为：

加载dom时，所有输入均为空。这就像使用
parseInt（“”）
。单击按钮时，您需要解析输入，然后输入将被填充感谢所有人。它起作用了。
   <input id=width type="number" onchange="update(this,this.id)" />

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