CODEWITHSUNDEEP
javascripthtmldom-events
Amadi
Amadi

Reputation: 23

Why my calculator is only allowing me to perform one type of operation

I am creating a simple calculator but for some reason or another only the subtraction operation is working. Anytime I try to perform another operation it just does subtraction. No, there are no error messages displayed within the console whenever I perform the other operations (i.e mul, add and div).

<body>

    <div class="container">

        <!--First operand-->
        <input type="text" class="operand" id="operand1" placeholder="First Input">

        <!--Operation section-->
        <select id="operator">
            <option value="add" id="add">+</option>
            <option value="sub" id="sub">-</option>
            <option value="add" id="mul">*</option>
            <option value="add" id="div">/</option>
        </select>

        <!--Second operand-->
        <input type="text" class="operand" id="operand2" placeholder="Second Input">

        <button type="submit" id="button">Submit</button>

        <div class="results" id="results">20</div>

    </div>


    <script src="calc.js"></script>

</body>

//Retrieved html elements
var opOne = document.getElementById("operand1");
var opTwo = document.getElementById("operand2");

//operators
var add = document.getElementById("add");
var sub = document.getElementById("sub");
var mul = document.getElementById("mul");
var div = document.getElementById("div");

//Result field
var result = document.getElementById("results");

//Button
var button = document.getElementById("button");


//When button is clicked
button.addEventListener("click", () => {

    if(sub) {
            result.textContent = Number(opOne.value) - Number(opTwo.value);
                console.log("Subtraction works");
    }  else if(add) {
            result.textContent = Number(opOne.value) + Number(opTwo.value);
                console.log("Additon works");
    }  else if(mul) {
            result.textContent = Number(opOne.value) * Number(opTwo.value);
                console.log("Multiplication works")
    }   else if(div) {
            result.textContent = Number(opOne.value) / Number(opTwo.value);
                console.log("Divison works")
    }
});

Upvotes: 0

Views: 90

Answers (4)

Mr Khan
Mr Khan

Reputation: 2292

Lets break it down for you. Firstly, you must not get the values of selection option indivisually with their respective IDs but instead just target the select field and fetch its value. That way when ever you select an option, by simply fetching the select field value, you will be able to retreive the selected option value. 

<!--Operation section-->
<select id="operator">
    <option value="add">+</option> //======> fix the values to be with respect to the sign selected
    <option value="sub">-</option> 
    <option value="mul">*</option> 
    <option value="div">/</option> 
</select>

Once thats done, we will go to the script and fetch the select field inside the click listener event to get the lastest value selected on click.

button.addEventListener("click", () => {
  //operators
  let operator = document.querySelector("#operator");

QuerySelector is the recommended way of fetching html elements instead of getElement. After that we will just check the selected value with .value on the element and match it with add for addtion and so on.

The Complete Code:

//Retrieved html elements
var opOne = document.querySelector("#operand1");
var opTwo = document.querySelector("#operand2");

//Result field
var result = document.querySelector("#results");

//Button
var button = document.querySelector("#button");


//When button is clicked
button.addEventListener("click", () => {
    //operators
    let operator = document.querySelector("#operator");

    if(operator.value ==="sub") {
            result.textContent = Number(opOne.value) - Number(opTwo.value);
                console.log("Subtraction works");
    }  else if(operator.value ==="add") {
            result.textContent = Number(opOne.value) + Number(opTwo.value);
                console.log("Additon works");
    }  else if(operator.value ==="mul") {
            result.textContent = Number(opOne.value) * Number(opTwo.value);
                console.log("Multiplication works")
    }   else if(operator.value ==="div") {
            result.textContent = Number(opOne.value) / Number(opTwo.value);
                console.log("Divison works")
    }
});
<!DOCTYPE html>
<html>
<body>

    <div class="container">

        <!--First operand-->
        <input type="text" class="operand" id="operand1" placeholder="First Input">

        <!--Operation section-->
        <select id="operator">
            <option value="add" id="add">+</option>
            <option value="sub" id="sub">-</option>
            <option value="mul" id="mul">*</option>
            <option value="div" id="div">/</option>
        </select>

        <!--Second operand-->
        <input type="text"  id="operand2" placeholder="Second Input">

        <button type="submit" id="button">Submit</button>

        <div class="results" id="results">20</div>

    </div>
</body>
</html>

Upvotes: 0

backcab
backcab

Reputation: 668

Without seeing your full code (including HTML), its difficult to provide a full answer. But I can give you what is going wrong.

Javascript is a Truthy/Falsy language. Meaning anything that isn't explicitly false is evaluated to be true.

Therefore, if(sub) always evaluates to true because sub is simply the element with id "sub" and not the value of element (which is what I assume you want, but again without the full code its difficult to know).

UPDATE:

You will need to do the if statement with the value of your operator element. In your event listener, do the following:

    var op = document.getElementById("operator").value;
    switch(op){
        case "sub":
            result.textContent = Number(opOne.value) - Number(opTwo.value);
            console.log("Subtraction works");
            break;
        case "add":
            result.textContent = Number(opOne.value) + Number(opTwo.value);
            console.log("Additon works");
            break;
        case "mul":
            result.textContent = Number(opOne.value) * Number(opTwo.value);
            console.log("Multiplication works");
            break;
        case "div":
            result.textContent = Number(opOne.value) / Number(opTwo.value);
            console.log("Divison works")
            break;
    }

Note that you will need to change the value of multiply and divide options to accurately reflect their operators (currently both have a value of "add").

Disclaimer: I'm currently at work and do not have the ability to test this code, but it should point you in the right direction for what you need to do.

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Check Now

//Retrieved html elements
        var opOne = document.getElementById("operand1");
        var opTwo = document.getElementById("operand2");

        //operators



        //Result field
        var result = document.getElementById("results");

        //Button
        var button = document.getElementById("button");


        //When button is clicked
        button.addEventListener("click", () => {
            var e = document.getElementById("operator");
            var strUser = e.options[e.selectedIndex].value;
            console.log(strUser);
            if (strUser === 'sub') {
                result.textContent = Number(opOne.value) - Number(opTwo.value);
                console.log("Subtraction works");
            } else if (strUser === 'add') {
                result.textContent = Number(opOne.value) + Number(opTwo.value);
                console.log("Additon works");
            } else if (strUser === 'mul') {
                result.textContent = Number(opOne.value) * Number(opTwo.value);
                console.log("Multiplication works")
            } else if (strUser === 'div') {
                result.textContent = Number(opOne.value) / Number(opTwo.value);
                console.log("Divison works")
            }
        });
 <!--First operand-->
        <input type="text" class="operand" id="operand1" placeholder="First Input">

        <!--Operation section-->
        <select id="operator">
            <option value="add" id="add">+</option>
            <option value="sub" id="sub">-</option>
            <option value="mul" id="mul">*</option>
            <option value="div" id="div">/</option>
        </select>

        <!--Second operand-->
        <input type="text" class="operand" id="operand2" placeholder="Second Input">

        <button type="submit" id="button">Submit</button>

        <div class="results" id="results">00</div>

Upvotes: 0

Helton Furau
Helton Furau

Reputation: 1

on yours if elses statement you are basically checking if sub, add, div, mul exists and as all of them return true, you always stay on the first one which is sub.

try creating some other variable to keep the operation that was chosen. and then do if else on that variable to check it's value if it's sub, add, div or mul.

Upvotes: 0

Related Questions