добавление нескольких элементов в список событий

#javascript

Вопрос:

У меня есть форма с двумя входными данными, которые будут принимать два числа, как показано ниже. И отображать результат каждого вычисления на основе математических операторов. Как мне получить два входных значения и добавить их в список событий, чтобы отслеживать изменения значений и обновлять результат на основе каждого математического оператора.

 <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 экспортируйте все математические операторы.

 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)
}

script.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)
        })
    })

1. В вашем коде нет прослушивателей событий, вы пропустили часть примера?

2. @DBS Я обновил код из того, что я пробовал, как мне получить значение для обоих входных данных? Я пытался .значение, но я не думаю, что это правильный путь.

Ответ №1:

Просто выберите значения, используя идентификаторы, и выполните расчет.

Пример реализации.

 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>