1

This simple javascript/html combination that should calculate exponential growth is not working for me It returns NaN when I submit

This is the code:

<html>
<head>
<script>
function Start() {
var GetA = document.getElementById("A").value;
var GetB = document.getElementById("B").value;
var GetX = document.getElementById("X").value;
var ParseA = parseInt(GetA);
var ParseB = parseInt(GetB);
var ParseX = parseInt(GetX);
var Num1 = ParseB + 100;
var Num2 = Num1 * .01;
var Num3 = Math.pow(Num2, ParseA);
var Num4 = Num3 * ParseA;
document.getElementById("Answer").innerHTML = Num4;
}
</script>
</head>
<body>
<input id="A" placeholder="Starting Number">
<br />
<input id="B" placeholder="Rate">
<br />
<input id="X" placeholder="Time">
<br />
<input type="button" id="Submit" value="Submit" onclick="Start()">
<p id="Answer"></p>
</body>
</html>
user3247345
  • 29
  • 6
  • See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators. The `^` operator isn't what you're looking for. – Evan Trimboli Feb 05 '14 at 01:55
  • The problem is you are getting the values before they are entered and `parseInt("")` returns `NaN`. Every math operation involving NaN propagates the NaN. – user2864740 Feb 05 '14 at 01:56
  • [Learn how to debug JavaScript](http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820). Look at the console. Notice the error? Solution: http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Felix Kling Feb 05 '14 at 01:57
  • Don't edit your code with the suggestions you get in the answers. Because the answers won't make sense anymore. Or did you really use `Math.pow` instead of `^`? – Felix Kling Feb 05 '14 at 02:00

2 Answers2

2
var Num3 = Num2 ^ ParseA;

^ is the bitwise xor operator. You probably want to use Math.pow(Num2, ParseA) instead.

It returns NaN when I submit

Only the Start function is executed when you submit. The Parse[ABX] variables however are initialized when the document loads - and will have the value undefined, which leads to NaN in calculations.

Move the part where you're getting the values from the inputs in the function.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
2

The problem with the NaN1 is the code is trying to access the DOM elements before they are added to the DOM and the variables are ending up with garbage values.

This is actually causing an Exception - as getElementById(..) returns null and null.value is invalid - and the script execution is aborted. The error console will contain a message similar to "TypeError: Cannot read property 'value' of null" . Due to "hoisting" of Function Declaration, the Start function is still defined.

Because of this error, the values ParseA/B/X are undefined. This causes certain math operations, such as undefined + number (as in ParseB + 100) to return NaN. Every subsequent math operation (e.g. Num1 * .01) involving the introduced NaN propagates the NaN.

Instead, wait to access the values until Start: after the elements exist (so that there is no exception) and valid values have been entered (so that parseInt itself won't return NaN).

If the following code still results in "NaN" output, then NaN was introduced in one of the parseInt lines.

function Start() {
    var GetA = document.getElementById("A").value;
    var ParseA = parseInt(GetA, 10);
    var GetB = document.getElementById("B").value;
    var ParseB = parseInt(GetB, 10);
    var GetX = document.getElementById("X").value;
    var ParseX = parseInt(GetX, 10);

    var Num1 = ParseB + 100;
    var Num2 = Num1 * .01;
    var Num3 = Num2 ^ ParseA;
    var Num4 = Num3 * ParseA;
    document.getElementById("Answer").innerHTML = Num4;
}

Note that I also specified a radix (10), which is good practice for parseInt.

1 The incorrect usage of ^ is a problem as discussed in Bergi's answer, would would result in an incorrect answer, but not NaN unless it is propagated from elsewhere.

user2864740
  • 60,010
  • 15
  • 145
  • 220