Input returning NaN JavaScript

Question

Heya again :P I was just wondering if there is a way to make wallArea return an integer because at the moment it returns NaN :s Any help is appreciated :) Aaron~

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

`wallWidth` is a DOM element and `wallHeight` is a DOM element. You are trying to **multiply** two **DOM elements**, what do you think the result should be? — Felix Kling, Jan 31 '14 at 10:43
possible duplicate of [Javascript get input text value](http://stackoverflow.com/questions/11563638/javascript-get-input-text-value) — Felix Kling, Jan 31 '14 at 10:45
@Alessio: Multiplication (`*`) always returns a number, it's unnecessary (read: wrong) to pass the result to `parseInt`. — Felix Kling, Jan 31 '14 at 10:51

score 0 · Answer 1 · answered Jan 31 '14 at 10:46

0

Missing to calculate the value

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

answered Jan 31 '14 at 10:46

Praveen

55,303
33
133
164

score 0 · Accepted Answer · answered Jan 31 '14 at 10:47

0

You forgot to take the value of the DOM element.

Substitute

var wallArea = wallWidth*wallHeight;

with

var wallArea = wallWidth.value*wallHeight.value;

answered Jan 31 '14 at 10:47

geraldo

562
11
33

Input returning NaN JavaScript

2 Answers2