my calculator returns the value 0 no matter the value filled out

Question

I am making a little calculator (practicing with functions etc), but no matter what I fill out it will always return the value 0.

my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Index</title>

    <script type="text/javascript" src="index.js"></script>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
    <body>
        <div id="mainContainer">
            <form>
<input type="number" id="value1">
<select id="operator"><option value="add">add</option><option value="minus">minus</option><option value="div">Divide</option><option value="mul">multiple</option></select>
<input type="number" id="value2"> 
<button id="calculate">Calculate</button>
            </form>
        </div>
    </body>
</html>

My javascript:

function prepCalculate() {
    let v1 = document.querySelector("#value1");
    let v2 = document.querySelector("#value2");

    if (isNaN(v1) || isNaN(v2)) {
        window.alert('one of the inputs does not equal a nummeric value!');

        return;
    } else {
        calculate();
    }
}

prepCalculate();

function calculate() {
    let v1 = document.querySelector("#value1");
    let v2 = document.querySelector("#value2");
    let operator = document.querySelector("#operator");
    let cal;

    if (operator == 'add') {
        cal = v1 + v2;
    } else if (operator == 'minus') {
        cal = v1 - v2;
    } else if (operator == 'div') {
        cal = v1 / v2;
    } else {
        cal = v1 * v2;
    }

    alert(cal);
    return cal;
}

My console.log() doesn't show me any errors either... So my question: What am I doing wrong?

`querySelector` will not return the value inside the `input`, so you're trying to do math with DOM nodes as operands. — Federico klez Culloca, Sep 10 '18 at 09:40
You only calculate once on page load, but not again when you press the button…!? — deceze, Sep 10 '18 at 09:41

T.J. Crowder · Accepted Answer · 2018-09-10T09:45:51.860

There are a few issues:

You're trying to use the elements themselves, not their values. Use .value to access the value, e.g.:

let v1 = document.querySelector("#value1").value;
// ---------------------------------------^^^^^^
let v2 = document.querySelector("#value2").value;
// ---------------------------------------^^^^^^
let operator = document.querySelector("#operator").value;
// -----------------------------------------------^^^^^^

You have <button id="calculate">Calculate</button> in a form element. The default type of button elements is "submit", so clicking that button will submit the form. You need type="button" to avoid that.
You haven't hooked up the button to the calculate function or prepCalculate function. Look into how to set up an event handler (e.g., addEventListener).
The value of an input is always a string. Most of your operations will coerce those strings to numbers, but + won't (because + with strings is concatenation). You'll want to convert the values to numbers. See this answer for lots of options for doing that.

Side note: Although you can use querySelector("#id") the way you are, the idiomatic (and fastest, not that it usually matters) way to get an element by its id value is document.getElementById(id) (no #).

Thanks! I can mark ur answer as helpfull in 7 minutes. But thanks for explaining — , Sep 10 '18 at 09:47
Also to add, 1. You could pass the values extracted in preCalculate method to Calculate method. This would save the DOM queries. 2. Calling the method preCalculate() in index.js is not suggested way when you are loading Javascript files in the section. You are getting "0" because the V1 & V2 are coming null when queried to DOM and Number(null) * Number(null) -> 0. — Vijay, Sep 10 '18 at 09:57

score 0 · Answer 2 · edited Sep 10 '18 at 09:44

0

querySelector returns the node, to get the value you need .value, then you get a string of the text in input, to do arithmetic you need to also convert them to number.

let v1 = document.querySelector("#value1").value|0;
let v2 = document.querySelector("#value2").value|0;
let operator = document.querySelector("#operator").value;

edited Sep 10 '18 at 09:44

Federico klez Culloca

26,308
17
56
95

answered Sep 10 '18 at 09:44

Chris Li

2,628
1
8
23

score 0 · Answer 3 · answered Sep 10 '18 at 09:45

0

You're letting v1 and v2 be the inputs themselves, instead of the values inside.

answered Sep 10 '18 at 09:45

Michel ten Voorde

11
1

my calculator returns the value 0 no matter the value filled out

3 Answers3