Why is my alert always showing the wrong information? (addition)

I’m currently writing some code using both HTML and Javascript. I’m building myself a mini Javascript calculator that can run simple additions using a HTML ‘GUI’ – if you take it that way. The code is below.

<!DOCTYPE html>
<html lang="en">
<head>
<link href="stylesheet/calculator.css" type="text/css" rel="stylesheet" />
<script>
    function activeButton() {
        if (document.getElementById("radioAdd").checked === true) {
            var valueOne = Number(document.getElementById("number1".value));
            var valueTwo = Number(document.getElementById("number2".value));
            var result = valueOne + valueTwo;
        alert("Your Result Is " + result);
        }       
    }
</script>
</head>
<body>
<div id="wrapper">
        <div id="form-move">
            <form name = "calculator" id="calculator">
                <div id="numberInput">
                    <input type="number" name="inputNumber1" id="number1" placeholder="Type or Select Your First Number" />
                    <input type="number" name="inputNumber2" id="number2" placeholder="Type or Select Your Second Number" />
                </div>
                <div id="radio-input">
                        <span class="title">Operators:</span>
                    <input type="radio" name="radioInputAdd" id="radioAdd" value="Addition" />
                        <label for="radioAdd">Addition</label>
                    <input type="radio" name="radioInputAdd" id="radioDivision" value="Division" />
                        <label for="radioDivision">Division</label>
                    <input type="radio" name="radioInputAdd" id="radioMultiply" value="Multiplication" />
                        <label for="radioMultiply">Multiply</label>
                    <input type="radio" name="radioInputAdd" id="radioSubtract" value="Subtraction" />
                        <label for="radioSubtract">Subtract</label>
                </div>
                <div class="submit">
                    <input type="submit" value="Enter" id="submit" onclick="activeButton()" />
                </div>
            </form>
        </div>
</div>

JavaScript
​x
 
<!DOCTYPE html>
<html lang="en">
<head>
<link href="stylesheet/calculator.css" type="text/css" rel="stylesheet" />
<script>
    function activeButton() {
        if (document.getElementById("radioAdd").checked === true) {
            var valueOne = Number(document.getElementById("number1".value));
            var valueTwo = Number(document.getElementById("number2".value));
            var result = valueOne + valueTwo;
        alert("Your Result Is " + result);
        }       
    }
</script>
</head>
<body>
<div id="wrapper">
        <div id="form-move">
            <form name = "calculator" id="calculator">
                <div id="numberInput">
                    <input type="number" name="inputNumber1" id="number1" placeholder="Type or Select Your First Number" />
                    <input type="number" name="inputNumber2" id="number2" placeholder="Type or Select Your Second Number" />
                </div>
                <div id="radio-input">
                        <span class="title">Operators:</span>
                    <input type="radio" name="radioInputAdd" id="radioAdd" value="Addition" />
                        <label for="radioAdd">Addition</label>
                    <input type="radio" name="radioInputAdd" id="radioDivision" value="Division" />
                        <label for="radioDivision">Division</label>
                    <input type="radio" name="radioInputAdd" id="radioMultiply" value="Multiplication" />
                        <label for="radioMultiply">Multiply</label>
                    <input type="radio" name="radioInputAdd" id="radioSubtract" value="Subtraction" />
                        <label for="radioSubtract">Subtract</label>
                </div>
                <div class="submit">
                    <input type="submit" value="Enter" id="submit" onclick="activeButton()" />
                </div>
            </form>
        </div>
</div>
​

There are TWO input boxes in the middle of the page, which only accept numbers.
Underneath them are four radio buttons – Add, division, Multiply and Subtract. Now, You can see the javascript incorporated at the top of the page.

The problem I have is that when I run the page and want to add two numbers, the code works but the answer comes out as 0. I have tested this in chrome and this happens all the time.

Could Someone Possibly please help?

Answer

The problem is in how you’re trying to get the value from the input elements. In this code:

var valueOne = Number(document.getElementById("number1".value));
var valueTwo = Number(document.getElementById("number2".value));

JavaScript
 
var valueOne = Number(document.getElementById("number1".value));
var valueTwo = Number(document.getElementById("number2".value));
​

You’re trying to get the value property from the string "number1", which is undefined, then passing that to document.getElementById, which will return null, and then passing that to Number, which will return 0.

Try this this instead:

var valueOne = Number(document.getElementById("number1").value);
var valueTwo = Number(document.getElementById("number2").value);

JavaScript
 
var valueOne = Number(document.getElementById("number1").value);
var valueTwo = Number(document.getElementById("number2").value);
​

Advertisement

Answer