输入返回NaN JavaScript

Question

Heya：P我只是想知道是否有办法让wallArea返回一个整数，因为此刻它返回NaN：s任何帮助都赞赏:) 亚伦〜

<form id="frm1" action="form_action.asp">
Number of walls: <input type="number" name="numberOfWallsInput" ><br>
Width of walls in meters: <input type="number" name="wallWidthInput" ><br>
Height of walls in meters: <input type="number" name="wallHeightInput" ><br>
</form>

<p>Number of walls: <p id="numberOfWallDiv"></p></p>
<p>Width of walls: <p id="wallWidthDiv"></p></p>
<p>Height of walls: <p id="wallHeightDiv"></p></p>
<p>Area of walls: <p id="wallAreaDiv"></p></p>



<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var numberOfWalls = document.getElementsByName("numberOfWallsInput")[0];
var wallWidth = document.getElementsByName("wallWidthInput")[0];
var wallHeight = document.getElementsByName("wallHeightInput")[0];
var wallArea = wallWidth*wallHeight;



document.getElementById("numberOfWallDiv").innerHTML = numberOfWalls.value;
document.getElementById("wallWidthDiv").innerHTML = wallWidth.value;
document.getElementById("wallHeightDiv").innerHTML = wallHeight.value;
document.getElementById("wallAreaDiv").innerHTML = wallArea;

}
</script>

Answer 1

缺少计算值

var wallArea = parseInt(wallWidth.value, 10)*parseInt(wallHeight.value, 10);

Answer 2

您忘记了DOM元素的值。

替代

var wallArea = wallWidth*wallHeight;

与

var wallArea = wallWidth.value*wallHeight.value;