CODEWITHSUNDEEP
javascripthtmlmath
PepiLepi
PepiLepi

Reputation: 15

Why am I getting NaN when entering a number in an input field and combining it with Math?

I want to calculate the volume and length of all the sides, but I'm getting NaN when I put in a number into the prompt. Why isn't it working?

var length = document.getElementById("length");
var answer = document.getElementById("answer");
var sides = document.getElementById("sides");


var side = prompt("Enter the length/height/width of your cube", 2);



length.innerText = side;


var volume = Math.pow(side,3);
var sidesmax = length*12;
answer.innerText = volume;
answer.innerText = sidesmax;
<p>
One side of your cube has a measurement of <span id="length">___</span> units.
</p>
<p>
Your cube has a volume of <span id="answer">___</span> units cubed.
</p>
<p>
Your cube has max side length of <span id="answer">___</span>.
</p>

Upvotes: 1

Views: 418

Answers (3)

Mani
Mani

Reputation: 259

var length = document.getElementById("length");
var answer = document.getElementById("answer");
var sides = document.getElementById("sides");


var side = prompt("Enter the length/height/width of your cube", 2);



length.innerText = side;


var volume = Math.pow(side,3);
var sidesmax = length*12;
answer.innerText = volume;
answer.innerText = sidesmax;
<p>
One side of your cube has a measurement of <span id="length">___</span> units.
</p>
<p>
Your cube has a volume of <span id="answer">___</span> units cubed.
</p>
<p>
Your cube has max side length of <span id="answer">___</span>.
</p>

Upvotes: 0

skirtle
skirtle

Reputation: 29112

So you've got a few mistakes.

This line:

var sidesmax = length*12;

should be this:

var sidesmax = side * 12;

These lines both use the same element, called answer:

answer.innerText = volume;
answer.innerText = sidesmax;

Use different ids for the two spans and separate variables for them.

For small integer powers it is common to use * rather than using Math.pow, though either will work:

var volume = side * side * side;

Note also that the variable side contains a string, not a number. For operations involving * or Math.pow this won't matter because the automatic type coercion will convert it for you but if you tried to use other operators, such as +, it will be treated as a string.

var length = document.getElementById("length");
var sidesAnswer = document.getElementById("sidesAnswer");
var volumeAnswer = document.getElementById("volumeAnswer");
var sides = document.getElementById("sides");

var side = prompt("Enter the length/height/width of your cube", 2);

length.innerText = side;

var volume = side * side * side;
var sidesmax = side * 12;
volumeAnswer.innerText = volume;
sidesAnswer.innerText = sidesmax;
<p>
One side of your cube has a measurement of <span id="length">___</span> units.
</p>
<p>
Your cube has a volume of <span id="volumeAnswer">___</span> units cubed.
</p>
<p>
Your cube has max side length of <span id="sidesAnswer">___</span>.
</p>

Upvotes: 1

anees
anees

Reputation: 1855

The problem is with this line var sidesmax = parseInt(length)*12; you are multiplying 12 with a string (__). by removing your file the code is working well.

var length = document.getElementById("length");
var answer = document.getElementById("answer");
var sides = document.getElementById("sides");


var side = prompt("Enter the length/height/width of your cube", 2);



length.innerText = side;

console.log(side);
var volume = Math.pow(side,3);

// var sidesmax = parseInt(length)*12; // multiplying string with 1
answer.innerText = volume;
answer.innerText = sidesmax;

Upvotes: 0

Related Questions