JavaScript Calculator Does not respond

December 12, 2022

const num1Element = document.querySelector("#num1");
const num2Element = document.querySelector("#num2");
const resultElement = document.querySelector("#result");
const operatorlememt = document.querySelectorAll("[data-operation]")

function summary() {
  if (operatorElememt == "+") {
    const sumElement = Number(num1.value) + Number(num2.value);
    resultElement.innerHTML = sumElement;
  }
}

function multi() {
  if (operatorElememt == "*") {
    const multiElement = Number(num1.value) * Number(num2.value);
    resultElement.innerHTML = multiElement;
  }
}

function divide() {
  if (operatorElememt == "/") {
    const divideElement = Number(num1.value) / Number(num2.value);
    resultElement.innerHTML = divideElement;
  }
}

function subtraction() {
  if (operatorElememt == "-") {
    const subtractionElement = Number(num1.value) - Number(num2.value);
    resultElement.innerHTML = subtractionElement;
  }
}

<div class="container"></div>
<input class="num1" type="text">
<select name="" id="operator" class="operator">
  <option data-operation value="-">-</option>
  <option data-operation value="+">+</option>
  <option data-operation value="/">/</option>
  <option data-operation value="*">*</option>
</select>
<input class="num2" type="text">
<button onclick="summary();divide();multi();subtraction()">Click</button>
<br>
<span class="result_con">
        <label for=""  id="result"></label>
    </span>

Console doesn’t give any error code or any other result and I am quite new in to the subject. I was expecting a result regarding the selected operation. To select the operation I wrote select section and added the operations. I inteed to keep select part. Thanks in advance

>Solution :

I understand that you are a beginner. There were quiet a few issues with your code. I am attaching the snippet of the changes I made (I wouldn’t consider myself an expert either and still may have overlooked something)

<body>

    <div class="container"></div>
    <input id="num1" type="text">
    <select name="" id="operator" class="operator">
        <option data-operation value="-">-</option>
        <option data-operation value="+">+</option>
        <option data-operation value="/">/</option>
        <option data-operation value="*">*</option>
    </select>
    <input id="num2" type="text">
    <button onclick="summary();divide();multi();subtraction()">Click</button>
    <br>
    <span class="result_con">
        <label for=""  id="result"></label>
    </span>


    <script>

        const num1Element = document.querySelector("#num1");
        const num2Element = document.querySelector("#num2");
        const resultElement = document.querySelector("#result");
        const operatorElememt = document.querySelector("#operator")

        function summary() {
            if (operatorElememt.value == "+") {
                console.log("Adding");
                const sumElement = Number(num1Element.value) + Number(num2Element.value);
                resultElement.innerHTML = sumElement;
            }
        }

        function multi() {
            if (operatorElememt.value == "*") {
            const multiElement = Number(num1Element.value) * Number(num2Element.value);
            resultElement.innerHTML = multiElement;
            }
        }

        function divide() {
            if (operatorElememt.value == "/") {
            const divideElement = Number(num1Element.value) / Number(num2Element.value);
            resultElement.innerHTML = divideElement;
            }
        }

        function subtraction() {
            if (operatorElememt.value == "-") {
            const subtractionElement = Number(num1Element.value) - Number(num2Element.value);
            resultElement.innerHTML = subtractionElement;
            }
        }

    </script>

</body>

Here are the issues I found:

You are trying to access your input element using a CSS selector for ids but you did not give those elements an id attribute
The select element works like an input element except it has a dropdown and limited options. You just need to get the select element like you would get an input Element. This also includes calling operatorElement.value
You are missing an E when getting the select element 🙂

And I would suggest instead of different functions, nest your conditions inside one event handler