Tengo un formulario que tiene dos entradas que tomarán dos números como a continuación. Y muestra el resultado de cada cálculo basado en los operadores matemáticos. ¿Cómo obtengo los dos valores de entrada y los agrego a eventListener para monitorear los cambios de valor y actualizar el resultado en función de cada operador matemático?
<div class="form"> <input class="input" id="firstNum" /> <input class="input" id="secondNum" /> </div> <div class="grid"> <div class="grid-item"> <h3>Addition</h3> <p id="addition"></p> </div> <div class="grid-item"> <h3>Substraction</h3> <p id="substraction"></p> </div> <div class="grid-item"> <h3>Multiplication</h3> <p id="multiplication"></p> </div> <div class="grid-item"> <h3>Division</h3> <p id="division"></p> </div> </div>
operator.js exporta cada operador matemático.
export function addition (a, b) { return parseInt(a) + parseInt(b) } export function substraction (a, b) { return parseInt(a) - parseInt(b) } export function multiplication (a, b) { return parseInt(a) * parseInt(b) } export function division (a, b) { return (a / b).toFixed(1) }
guión.js
import * as mathOperator from "./operators.js" document.querySelectorAll(".input") .forEach(function (element) { element.addEventListener("change", function (event) { let a = event.currentTarget.getAttribute("id") let b = event.currentTarget.getAttribute("id") console.log(a, b) document.getElementById("addition").textContent = mathOperator.addition(a, b) document.getElementById("substraction").textContent = mathOperator.substraction(a, b) document.getElementById("multiplication").textContent = mathOperator.multiplication(a, b) document.getElementById("division").textContent = mathOperator.division(a, b) }) })
Simplemente seleccione los valores usando las identificaciones y haga el cálculo.
Ejemplo de implementación.
function addition(a, b) { return parseInt(a) + parseInt(b) } function substraction(a, b) { return parseInt(a) - parseInt(b) } function multiplication(a, b) { return parseInt(a) * parseInt(b) } function division(a, b) { return b === 0 ? 0 : (a / b).toFixed(1) } function calculate() { const a = document.getElementById("firstNum").value || 0; const b = document.getElementById("secondNum").value || 0; document.getElementById("addition").textContent = addition(a, b) document.getElementById("substraction").textContent = substraction(a, b) document.getElementById("multiplication").textContent = multiplication(a, b) document.getElementById("division").textContent = division(a, b) } document.querySelectorAll(".input") .forEach(function (element) { element.addEventListener("change", function (event) { calculate() }) })
<div class="form"> <input class="input" id="firstNum" /> <input class="input" id="secondNum" /> </div> <div class="grid"> <div class="grid-item"> <h3>Addition</h3> <p id="addition"></p> </div> <div class="grid-item"> <h3>Substraction</h3> <p id="substraction"></p> </div> <div class="grid-item"> <h3>Multiplication</h3> <p id="multiplication"></p> </div> <div class="grid-item"> <h3>Division</h3> <p id="division"></p> </div> </div>