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 ></div>
<input type="text">
<select name="" id="operator" >
<option data-operation value="-">-</option>
<option data-operation value=" "> </option>
<option data-operation value="/">/</option>
<option data-operation value="*">*</option>
</select>
<input type="text">
<button onclick="summary();divide();multi();subtraction()">Click</button>
<br>
<span >
<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
CodePudding user response:
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 ></div>
<input id="num1" type="text">
<select name="" id="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 >
<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