Soy nuevo en JavaScript. Hice una calculadora simple que tiene 2 valores de entrada con 4 botones de operadores. ¿Cómo puedo corregir este JavaScript para que pueda contar los números en función de diferentes operadores y mostrar el resultado correcto? ¿Cómo escribirlo usando la condición if else o cambiar de caso?
Ahora que presioné todos los botones, solo muestra la salida solo con la suma.
function count() { var n1 = parseFloat(document.getElementById("num1").value); var n2 = parseFloat(document.getElementById("num2").value); var optr = document.getElementById("operator").value; let result; if (optr == '+') { result = n1 + n2; } else if (optr == '-') { result = n1 - n2; } else if (optr == '*') { result = n1 * n2; } else { result = n1 / n2; } document.getElementById("output").innerHTML = "Total is: " + result; } Number 1:<input type="number" id="num1"><br><br> Number 2:<input type="number" id="num2"><br><br> <input type="button" value="+" onclick="count()" id="operator"> <input type="button" value="-" onclick="count()" id="operator"> <input type="button" value="*" onclick="count()" id="operator"> <input type="button" value="/" onclick="count()" id="operator"> <p id="output"></p>Hay muchas maneras de lograr lo que quieres. Aquí hay uno que he preparado modificando/simplificando su código original:
const in1 = document.getElementById("num1"), in2 = document.getElementById("num2"); document.addEventListener("click", function(ev) { if (ev.target.classList.contains("operator")) { let optr = ev.target.value, n1 = +in1.value, n2 = +in2.value, result; if (optr == '+') result = n1 + n2; else if (optr == '-') result = n1 - n2; else if (optr == '*') result = n1 * n2; else result = n1 / n2; document.getElementById("output").innerHTML = "Total is: " + result; } }) Number 1:<input type="number" id="num1"><br><br> Number 2:<input type="number" id="num2"><br><br> <input type="button" value="+" class="operator"> <input type="button" value="-" class="operator"> <input type="button" value="*" class="operator"> <input type="button" value="/" class="operator"> <p id="output"></p>Algunas observaciones:
id siempre deben ser únicos en una página. Reemplacé las id en sus botones por atributos de class .input deben evaluarse en el momento en que se hace clic en el botón del operador.+ delante de in1.value y in2.value .onclick , utilicé un archivo adjunto de evento delegado : el evento de clic se adjunta a todo el documento, pero solo provocará una acción si el elemento real en el que se hizo clic ( ev.target ) tiene la palabra "operador" en su lista de clases.Cambiar mayúsculas y minúsculas o si/si no. Ambos tienen razón. Pero prefiero la versión de la caja del interruptor, porque es más limpia. Siguiendo la respuesta de @CarstenMassmann, aquí está la ruta del caso del interruptor:
const in1 = document.getElementById("num1"); const in2 = document.getElementById("num2"); document.addEventListener("click", function(e) { if (e.target.classList.contains("operator")) { const optr = e.target.value const n1 =+ in1.value; const n2 =+ in2.value; let result = 'i dont know'; switch (optr) { case '+': result = n1 + n2 break; case '-': result = n1 - n2 break; case '*': result = n1 * n2; break; case '/': result = n1 / n2; } document.getElementById("output").innerHTML = "= " + result; } }) Number 1:<input type="number" id="num1"><br><br> Number 2:<input type="number" id="num2"><br><br> <input type="button" value="+" class="operator"> <input type="button" value="-" class="operator"> <input type="button" value="*" class="operator"> <input type="button" value="/" class="operator"> <p id="output"></p>