CODEWITHSUNDEEP
javascripthtmlundefinedcalculator
Rory .Oconnell
Rory .Oconnell

Reputation: 3

Why am I getting an undefined result with my calculator?

So i'm pretty new to coding, wanted to try create a simple calculator with html and javascript. But when you click calculate, the result just comes back as undefined in the console. Any help would be greatly appreciated!

html code 

<!DOCTYPE html>
<html lang="en">
    <head>

    </head>

    <body>
        <form>
            Value 1: <input type="text" id="value1">
            Value 2: <input type="text" id="value2">
            operator:
            <select id="operator">
                <option value="add">Add</option>
                <option value="min">Minus</option>
                <option value="div">Divide</option>
                <option value="mul">Multiply</option>
            </select>
            <button type="button" onclick="calc()" > Calculate</button>
        </form>

        <div id="Results"></div>

        <script src="Main.js"></script>
    </body>

</html>

And then javascript code

function calc() 
{
    var a = parseInt(document.querySelector("#value1").value);
    var b = parseInt(document.querySelector("#value2").value);
    var op = document.querySelector("#operator").value;
    var calculate;

    if(op == "add") 
    { 
        calculate == a + b;
    }
    else if(op == "min")
    {
        calculate == a - b;
    }
    else if(op == "div")
    {
        calculate == a / b;
    }
    else if(op == "mul")
    {
        calculate == a * b;
    }   
console.log(calculate);
}

Upvotes: 0

Views: 1519

Answers (5)

user12956752
user12956752

Reputation:

Try using just an = instead of a double equals on the calculate function, its just doing a comparison here

Upvotes: 1

Mohamed Wagih
Mohamed Wagih

Reputation: 1466

When you want to assign a value to a variable you need to use only one = think about it as if you were trying to do a simple math equation on a piece of paper you would do the following A=1+1=2 that means A is the variable and 2 is its value.

As for the comparison operators here in JavaScript you should use a double == or triple equals ===.

if(A == 2) {..}  //Means if A's value equals 2
if(A === 2) {..} //Means if A's value equals 2 AND A's data type is the same as 2's

Hope everything is crystal clear now.

Upvotes: 0

Bender
Bender

Reputation: 92

As the Comment of enhzflep suggests == and === are for comparison in Javascript === checking for the type aswell. Also do you have a submit button in your form ?

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

You might retrieve values from elements with document.getElementById("elementID").

The snippet above me doesn't quite work (1x2 = -1). Check for the proper DOM methods and HTML Formelements https://www.w3schools.com/html/html_form_elements.asp for eg

Upvotes: 1

Pranjal Batra
Pranjal Batra

Reputation: 36

The reason you are getting undefined is because you are using the '==' operator instead of just '='.

Upvotes: 1

DCR
DCR

Reputation: 15700

easy fix, just replace == with = inside your if statements

function calc() 
{
    var a = parseInt(document.querySelector("#value1").value);
    var b = parseInt(document.querySelector("#value2").value);
    var op = document.querySelector("#operator").value;
    var calculate;

    if(op == "add") 
    { 
        calculate = a + b;
    }
    else if(op = "min")
    {
        calculate = a - b;
    }
    else if(op = "div")
    {
        calculate = a / b;
    }
    else if(op = "mul")
    {
        calculate = a * b;
    }   
console.log(calculate);
}
<html lang="en">
    <head>

    </head>

    <body>
        <form>
            Value 1: <input type="text" id="value1">
            Value 2: <input type="text" id="value2">
            operator:
            <select id="operator">
                <option value="add">Add</option>
                <option value="min">Minus</option>
                <option value="div">Divide</option>
                <option value="mul">Multiply</option>
            </select>
            <button type="button" onclick="calc()" > Calculate</button>
        </form>

        <div id="Results"></div>

        <script src="Main.js"></script>
    </body>

</html>

Upvotes: 1

Related Questions