Link to home
Create AccountLog in
Avatar of kenjpete
kenjpete

asked on

Error NaN when trying to add two input fields in Javascript

I am trying to sum two text fields using Javascript and my result keeps coming back as NaN (not a number?) and I am entering only numbers in the input fields. Despite some debugging in Visual Studio, I still can't figure out why?

Here is my HTML code:

<div id="calc">
        <p>
            <label for="num1">Enter Your First Number:</label>
            <input type="text" name="txtNum1" id="txtNum1" size="5" />
        </p>

        <p>
            <label for="num1">Enter Your Second Number:</label>
            <input type="text" name="txtNum2" id="txtNum2" size="5" />
        </p>

        <input type="button" name="add" id="add" value="Add" onclick="addNum();" />
       

    </div>

        <div id="ShowResults"></div>

Open in new window


And here is my javascript:
var firstNumber = parseInt(document.getElementById('txtNum1').value);
var secondNumber = parseInt(document.getElementById('txtNum2').value);

function addNum() {

        var result = firstNumber + secondNumber;

            resultMessage = "Your answer is: " + result;
            ShowResults.innerHTML = resultMessage;

}

Open in new window


Any help would be appreciated!
SOLUTION
Avatar of Rikin Shah
Rikin Shah
Flag of India image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
ASKER CERTIFIED SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account