CODEWITHSUNDEEP
javascript
user3247345
user3247345

Reputation: 29

Exponential Growth calculator?

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>

Upvotes: 1

Views: 1670

Answers (2)

user2864740
user2864740

Reputation: 61875

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.

Upvotes: 2

Bergi
Bergi

Reputation: 664425

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.

Upvotes: 2

Related Questions