如何使用单个事件侦听器而不是每个按钮中的 onclick 事件来做一个迷你计算器？

Question

挑战是用一个输入、4 个按钮和一个输出做一个简单的迷你计算器。输入是添加一个将立即出现在输出中的数字，接下来我将选择四个按钮（+、-、*、/）中的一个来进行数学运算，然后在输入上再次写入另一个数字。在输出中将出现该操作的结果，进一步将通过再次单击按钮并添加另一个数字来继续进行数学运算，并始终实现结果。

我之前在每个按钮中使用 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) =>{&nbsp; &nbsp;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) =>{&nbsp;//checking if button is pressed&nbsp;if(event.target.type = 'submit') {&nbsp; //if a is not set before, meaning first time input&nbsp; if(a == null) {&nbsp; &nbsp; a = Number(input.value);&nbsp; } else {&nbsp; &nbsp; // second number&nbsp; &nbsp; b = Number(input.value);&nbsp; &nbsp; if(op == 'plus') {&nbsp; &nbsp; &nbsp; a += b;&nbsp; &nbsp; } else if(op == 'minus') {&nbsp; &nbsp; &nbsp; a -= b;&nbsp; &nbsp; }else if(op == 'multiply') {&nbsp; &nbsp; &nbsp; a *= b;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; a /= b;&nbsp; &nbsp; }&nbsp; }&nbsp; //saving the operator that was pressed&nbsp; op = event.target.id;&nbsp; //showing output&nbsp; output.innerHTML = a + " " + op;&nbsp; //resetting input on each button pressed.&nbsp; input.value = '';&nbsp;}});<section class="container">&nbsp; <h1 class="heading">Do some maths</h1>&nbsp; <div class="calculator">&nbsp; <input class="inputNumbers" id="input" type="number" placeholder="choose a number here">&nbsp; <div class="buttons" id="buttons">&nbsp; &nbsp; &nbsp; &nbsp;<button id="plus" class="btn btn-plus">+</button>&nbsp; &nbsp; &nbsp; &nbsp;<button id="minus" class="btn btn-minus">-</button>&nbsp; &nbsp; &nbsp; &nbsp;<button id="multiply" class="btn btn-multiply">*</button>&nbsp; &nbsp; &nbsp; &nbsp;<button id="divide" class="btn btn-divide">/</button>&nbsp;</div>&nbsp;<div id="output" class="visor"></div>&nbsp;</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 => {&nbsp; output.innerHTML = message;};divButtons.addEventListener("click", event => {&nbsp; //do something&nbsp; let id = event.target.id;&nbsp; let value = parseInt(input.value);&nbsp; switch (selectedOperation) {&nbsp; &nbsp; case "plus":&nbsp; &nbsp; &nbsp; result += value;&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case "minus":&nbsp; &nbsp; &nbsp; result -= value;&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case "multiply":&nbsp; &nbsp; &nbsp; result *= value;&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case "divide":&nbsp; &nbsp; &nbsp; result /= value;&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; result = value;&nbsp; &nbsp; &nbsp; break;&nbsp; }&nbsp; selectedOperation = id;&nbsp; input.value = "";&nbsp; messageOutput(`${result} ${selectedOperation}`);});

Answer 3

将您的输入数字保存到变量中，然后将用户单击的数学函数保存到变量中，然后使用用户输入的当前值作为因子将其应用于保存的输入数字。像这样的东西：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) => {&nbsp; &nbsp; if(subtotal == 0) {&nbsp; &nbsp; &nbsp; &nbsp; output.value = e.target.value;&nbsp; &nbsp; }&nbsp; &nbsp; x = Number(e.target.value);&nbsp; &nbsp; y = Number(subtotal);&nbsp; &nbsp; switch (calculate) {&nbsp; &nbsp; &nbsp; &nbsp; case "btn-divide":&nbsp; &nbsp; &nbsp; &nbsp; calc = y / x;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "btn-multiply":&nbsp; &nbsp; &nbsp; &nbsp; calc = y * x;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "btn-plus":&nbsp; &nbsp; &nbsp; &nbsp; calc =&nbsp; x + y;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "btn-minus":&nbsp; &nbsp; &nbsp; &nbsp; calc = y - x;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 0:&nbsp; &nbsp; &nbsp; &nbsp; calc = x;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; &nbsp; output.value = calc;}const divs = document.querySelectorAll('#buttons');divs.forEach(el => el.addEventListener('click', event => {&nbsp; &nbsp; calculate = event.target.classList[1];&nbsp; &nbsp; input.value = null;&nbsp; &nbsp; subtotal = calc;}));<section class="container">&nbsp; <h1 class="heading">Do some maths</h1>&nbsp; <div class="calculator">&nbsp; <input class="inputNumbers" id="input" type="number" placeholder="choose a number here">&nbsp;&nbsp;&nbsp; <div class="buttons" id="buttons">&nbsp; &nbsp; &nbsp; &nbsp;<button id="plus" class="btn btn-plus">+</button>&nbsp; &nbsp; &nbsp; &nbsp;<button id="minus" class="btn btn-minus">-</button>&nbsp; &nbsp; &nbsp; &nbsp;<button id="multiply" class="btn btn-multiply">*</button>&nbsp; &nbsp; &nbsp; &nbsp;<button id="divide" class="btn btn-divide">/</button>&nbsp;</div>&nbsp;<input id="output" type="number" class="visor" value=0>&nbsp;</div></section>