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>no se muestran errores, pero no funciona y la salida no aparece
Creo que el código de Levi está funcionando bien. Solo un pequeño error de ajuste. Y el id "valor 1" no es igual al id "valor1", puede cambiar ambos a "valor1".
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>