如何使用單個事件監聽器而不是每個按鈕中的 onclick 事件來做一個迷你計算器？

Question

挑戰是用一個輸入、4 個按鈕和一個 output 做一個簡單的迷你計算器。 輸入是添加一個將立即出現在 output 中的數字，接下來我將選擇四個按鈕（+、-、*、/）中的一個來進行數學運算，然后在輸入端再次寫入另一個數字。 在 output 中將出現該操作的結果，進一步將通過再次單擊按鈕並添加另一個數字來繼續進行數學運算，並始終實現結果。

我之前在每個按鈕中使用 onclick 事件並使用提示寫入數字來完成此操作。 現在我想使用輸入來寫入數字並使用一個事件偵聽器來處理所有按鈕。 任何人都可以幫助我解決問題並向我解釋每一步嗎？

到目前為止，這是我的代碼：

let input =document.querySelector('#input');
let output =document.querySelector('#output');
let divButtons = document.querySelector('#buttons');


let messageOutput = (message) =>{
   output.innerHTML = message;
}

messageOutput(input.value); // this doesn't work. What I miss to do show the input in the output?


divButtons.addEventListener('click', () =>{
 //do something

})

<section class="container">

  <h1 class="heading">Do some maths</h1>

  <div class="calculator">

  <input class="inputNumbers" id="input" type="number" placeholder="choose a number here">

  <div class="buttons" id="buttons">
       <button id="plus" class="btn btn-plus">+</button>
       <button id="minus" class="btn btn-minus">-</button>
       <button id="multiply" class="btn btn-multiply">*</button>
       <button id="divide" class="btn btn-divide">/</button>
 </div>

 <div id="output" class="visor"></div>
 </div>

</section>

我是新手，所以我需要幫助來解決這個挑戰並了解我應該做什么。 謝謝

Answer 1

稍微修改了 JS 代碼，使用您已經編寫的偵聽器，如果您需要更多解釋，請告訴我。 希望能幫助到你。

 let input =document.querySelector('#input'); let output =document.querySelector('#output'); let divButtons = document.querySelector('#buttons'); let a = null; let b = null; let op = null; let messageOutput = (message) =>{ output.innerHTML = message; } messageOutput(input.value); // this doesn't work. What I miss to do show the input in the output? divButtons.addEventListener('click', (event) =>{ //checking if button is pressed if(event.target.type = 'submit') { //if a is not set before, meaning first time input if(a == null) { a = Number(input.value); } else { // second number b = Number(input.value); if(op == 'plus') { a += b; } else if(op == 'minus') { a -= b; }else if(op == 'multiply') { a *= b; } else { a /= b; } } //saving the operator that was pressed op = event.target.id; //showing output output.innerHTML = a + " " + op; //resetting input on each button pressed. input.value = ''; } });

 <section class="container"> <h1 class="heading">Do some maths</h1> <div class="calculator"> <input class="inputNumbers" id="input" type="number" placeholder="choose a number here"> <div class="buttons" id="buttons"> <button id="plus" class="btn btn-plus">+</button> <button id="minus" class="btn btn-minus">-</button> <button id="multiply" class="btn btn-multiply">*</button> <button id="divide" class="btn btn-divide">/</button> </div> <div id="output" class="visor"></div> </div> </section>

Answer 2

希望這可以幫助。 稍微修改了您的代碼段並添加了一些變量。

let input = document.querySelector("#input");
let output = document.querySelector("#output");
let divButtons = document.querySelector("#buttons");

let result = null;
let selectedOperation = null;

let messageOutput = message => {
  output.innerHTML = message;
};

divButtons.addEventListener("click", event => {
  //do something
  let id = event.target.id;
  let value = parseInt(input.value);

  switch (selectedOperation) {
    case "plus":
      result += value;
      break;

    case "minus":
      result -= value;
      break;

    case "multiply":
      result *= value;
      break;

    case "divide":
      result /= value;
      break;

    default:
      result = value;
      break;
  }

  selectedOperation = id;
  input.value = "";
  messageOutput(`${result} ${selectedOperation}`);
});

Answer 3

將輸入的數字保存到變量中，然后將用戶單擊的數學 function 保存到變量中，然后使用用戶輸入的當前值作為因子將其應用於保存的輸入數字。

像這樣的東西：

 let input = document.querySelector('#input'); let output = document.querySelector('#output'); let inputnumber = 0; let subtotal = 0; let total = 0; let calculate = 0; let x; let y; input.oninput = (e) => { if(subtotal == 0) { output.value = e.target.value; } x = Number(e.target.value); y = Number(subtotal); switch (calculate) { case "btn-divide": calc = y / x; break; case "btn-multiply": calc = y * x; break; case "btn-plus": calc = x + y; break; case "btn-minus": calc = y - x; break; case 0: calc = x; break; } output.value = calc; } const divs = document.querySelectorAll('#buttons'); divs.forEach(el => el.addEventListener('click', event => { calculate = event.target.classList[1]; input.value = null; subtotal = calc; }));

 <section class="container"> <h1 class="heading">Do some maths</h1> <div class="calculator"> <input class="inputNumbers" id="input" type="number" placeholder="choose a number here"> <div class="buttons" id="buttons"> <button id="plus" class="btn btn-plus">+</button> <button id="minus" class="btn btn-minus">-</button> <button id="multiply" class="btn btn-multiply">*</button> <button id="divide" class="btn btn-divide">/</button> </div> <input id="output" type="number" class="visor" value=0> </div> </section>

Answer 4

您正在尋找的術語稱為事件委托。

 let input =document.querySelector('#input'); let output =document.querySelector('#output'); let divButtons = document.querySelector('#buttons'); let messageOutput = (message) =>{ output.innerHTML = message; } messageOutput(input.value); // this doesn't work. What I miss to do show the input in the output? divButtons.addEventListener('click', (e) =>{ console.log(e.target.id) })

 <section class="container"> <h1 class="heading">Do some maths</h1> <div class="calculator"> <input class="inputNumbers" id="input" type="number" placeholder="choose a number here"> <div class="buttons" id="buttons"> <button id="plus" class="btn btn-plus">+</button> <button id="minus" class="btn btn-minus">-</button> <button id="multiply" class="btn btn-multiply">*</button> <button id="divide" class="btn btn-divide">/</button> </div> <div id="output" class="visor"></div> </div> </section>

基本上，您不會在每個元素上附加事件偵聽器，而是在所有元素的父級上附加相同的事件，並且可以使用 e.target 跟蹤事件源。