How do I successfully manipulate numbers taken from user input? (HTML/JavaScript)

Question

I'm trying to create a confirm box that will take two numbers from an input type="number"> tag and multiply or add them with the use of a confirm box but the result returned is NaN. What am I doing wrong?

HTML

<input id="number1" type="number">
<input id="number2" type="number">
<input type="submit" value="Start Process" onclick="decisionDemo()">

JavaScript

var number1 = document.getElementById("number1");
var number2 = document.getElementById("number2");

function decisionDemo(){
    if(confirm("Would you like to multiply or add?")){
        alert("You multiplied for the result of "+ number1*number2);
    }
    else{
        alert("You added for the result of "+ (number1+number2));
    }   
}

Answer 1

First, document.getElementById("number1") will return only HTML Element, if you want to get the value inside the textbox you have to use document.getElementById("number1").value ...

Second, you place the two statements, var number1 = document. ... and var number2 = document. ... outside the decisionDemo() method, so that, it will be executed only once. You should place those statements inside the decisionDemo() method.

Third, document.getElementById("number1").value will return string value. So, if you want to perform arithmetic calculation, you need to parse them to a sort of number, such as Integer or Float.

function decisionDemo(){
    var number1 = document.getElementById("number1").value;
    var number2 = document.getElementById("number2").value;
    number1 = parseFloat(number1);
    number2 = parseFloat(number2);
    if(confirm("Would you like to multiply or add?")){
        alert("You multiplied for the result of "+ number1*number2);
    }
    else{
        alert("You added for the result of "+ (number1+number2));
    }
}

You might face NaN in result when user enter invalid numbers.

You can use isNaN() to check whether your input is valid or not

Answer 2

NaN in JavaScript stands for 'Not a Number', which is exactly your case.

the variables are holding 2 DOM objects, instead of 2 numbers, you need to convert them to numbers before you do any arithmetic operation.

Answer 3

Also you can just get value of them, number1.value* number2.value

var number1 = document.getElementById("number1");
var number2 = document.getElementById("number2");

function decisionDemo(){
    if(confirm("Would you like to multiply or add?")){
        alert("You multiplied for the result of "+ (number1.value* number2.value));
    }
    else{
        alert("You added for the result of "+ (number1.value+number2.value));
    }
}

Answer 4

You need to parse the numbers using parseFloat

var number1 = parseFloat(document.getElementById("number1").value),
    number2 = parseFloat(document.getElementById("number2").value);

.value means the value of the input element.

Then you need to move these two definitions inside of your decisionDemo function. And change, "Would you like to multiply or add?" to "Would you like to multiply?".

In your case, your number variables were holding DOM elements, not their values. And thus you were multiplying/adding DOM elements.

DEMO

Full Code Redone:

<script>

function decisionDemo(){
    var number1 = parseFloat(document.getElementById("number1").value),
    number2 = parseFloat(document.getElementById("number2").value);

    if(confirm("Would you like to multiply?")){
        alert("You multiplied for the result of "+ (number1*number2));
    }
    else{
        alert("You added for the result of "+ (number1+number2));
    }   
}
</script>

<input id="number1" type="number">
<input id="number2" type="number">
<input type="submit" value="Start Process" onclick="decisionDemo()">

Answer 5

Please check also whether the element is found or not. IsNaN() and IsFinite() might useful.

function decisionDemo() {

                var number1 = 0;
                var number2 = 0;

                if (document.getElementById("number1") != null && isFinite(document.getElementById("number1").value)) {
                    number1 = parseFloat(document.getElementById("number1").value);
                }

                if (document.getElementById("number2") != null && isFinite(document.getElementById("number2").value)) {
                    number2 = parseFloat(document.getElementById("number2").value);
                }

                if (confirm("Would you like to multiply or add?")) {
                    alert("You multiplied for the result of " + number1 * number2);
                } else {
                    alert("You added for the result of " + (number1 + number2));
                }
            }