function calc() {
var a = parseFloat(document.querySelector("#value1").value);
var b = parseFloat(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 == "mul") {
calculate = a * b;
} else if (op == "div") {
calculate = a / b;
}
document.querySelector("#result").innerHTML = calculate;
} Value 1: <input type = "text" id = "value 1" >
Value 2: <input type = "text" id = "value 2">
Operator:
<select id = "operator" >
<option value="add">Add</option>
<option value="min">Minus</option>
<option value="mul">Multiply</option>
<option value="div">Divide</option>
</select>
<button type = "button" onclick="calc()" >Calculate </button>
</form>
<div id = "result"> </div>there are no errors shown but it isnt working and the output doesnt appear
I think Levi's code is doing well. Just a little bit wrapping error. And id "value 1" is not equal to id "value1", you can change both into "value1".
var a, b ,op, calculate;
function calc(){
a = parseFloat(document.querySelector("#value1").value);
b = parseFloat(document.querySelector("#value2").value);
op = document.querySelector("#operator").value;
if (op == "add") { calculate = a + b; }
else if (op == "min") { calculate = a - b; }
else if (op == "mul") { calculate = a * b; }
else if (op == "div") { calculate = a / b; }
console.log(calculate);
document.querySelector("#result").innerHTML=calculate;
}Calculator
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="mul">Multiply</option>
<option value="div">Divide</option>
</select>
<button type = "button" onclick="calc()" >Calculate </button>
<div id = "result"> </div>