Javascript 如何使用单个事件监听器而不是每个按钮中的onclick事件来实现小型计算器？

挑战是做一个简单的微型计算器，有一个输入，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

})

做一些数学
+
-
*
/

我是新来的，所以我需要帮助来解决这个挑战，并了解我应该做什么。

---

谢谢你

你要找的术语叫活动委派

let input=document.querySelector（“#input”）；
让output=document.querySelector（“#output”）；
让divButtons=document.querySelector（“#buttons”）；
让messageOutput=（message）=>{
output.innerHTML=消息；
}
messageOutput（input.value）；//这不管用。我错过了什么在输出中显示输入？
divButtons.addEventListener（'单击'，（e）=>{
console.log（e.target.id）
})

做一些数学
+
-
*
/

将输入的数字保存到变量中，然后将用户单击的数学函数保存到变量中，然后使用用户输入的当前值作为因子将其应用到保存的输入数字中

大概是这样的：

let input=document.querySelector（“#input”）；
让output=document.querySelector（“#output”）；
让inputnumber=0；
小计=0；
设total=0；
让计算=0；
设x；
让y；
input.oninput=（e）=>{
如果（小计==0）{
output.value=e.target.value；
}
x=数量（即目标值）；
y=数量（小计）；
开关（计算）{
案例“btn划分”：
计算=y/x；
打破
案例“btn乘法”：
计算=y*x；
打破
案例“btn plus”：
计算=x+y；
打破
案例“btn减”：
计算=y-x；
打破
案例0：
calc=x；
打破
}
输出值=计算值；
}
const divs=document.querySelectorAll（“#按钮”）；
divs.forEach（el=>el.addEventListener（'click'，event=>{
calculate=event.target.classList[1]；
input.value=null；
小计=计算；
}));

做一些数学
+
-
*
/
使用您已经编写的侦听器稍微修改了JS代码，如果您需要更多解释，请告诉我。希望能有帮助


let input=document.querySelector（“#input”）；
让output=document.querySelector（“#output”）；
让divButtons=document.querySelector（“#buttons”）；
设a=null；
设b=null；
设op=null；
让messageOutput=（message）=>{
output.innerHTML=消息；
}
messageOutput（input.value）；//这不管用。我错过了什么在输出中显示输入？
divButtons.addEventListener（'单击'，（事件）=>{
//检查按钮是否按下
如果（event.target.type='submit'）{
//如果之前未设置，则表示首次输入
如果（a==null）{
a=数字（输入值）；
}否则{
//第二个数字
b=数字（输入值）；
如果（op=='plus'）{
a+=b；
}else if（op==‘减’）{
a-=b；
}else if（op=='multiply'）{
a*=b；
}否则{
a/=b；
}
}
//保存按下的操作员
op=event.target.id；
//显示输出
output.innerHTML=a+“”+op；
//在每个按下的按钮上重置输入。
input.value=''；
}
});

做一些数学
+
-
*
/
希望这有帮助。稍微修改了代码段并添加了一些变量

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

是的，我知道，但我需要我怎么做。我需要解决方案并解释。您可以使用两个输入字段实际获取两个输入。每当单击任何按钮时，计算a*b，其中*为+、-、*、/。这里没有确切的答案。这完全取决于你的需求。挑战只是一个输入。因为它假设继续做数学运算，不是a+b，而是下一个数字升级的结果。是的，我知道没有一个答案，我只是想有人给我一个答案。但是好的。我会等别人给我一个合适的答案。谢谢你能给我解释一下这部分吗？输入之后的oninput是什么：input.oninput=（e）=>{（…）谢谢，它将一个事件侦听器绑定到输入元素，该元素在每次输入值更改时都会触发，并在花括号内运行代码。我仍然感到困惑。您在el中有两个事件oninput和一个addeventListener。就是这样吗？但是为什么还要使用oninput而不是addeventListener来处理该输入呢？这只是两个不同之处不同的方式你可以添加一个事件监听器是的，但我想要的是只使用一个事件监听器，而不是使用旧的方式。我说过了。非常感谢@Hamza。如果你这么想，我向你道歉。先生。我也是新来的。也许我只是走了一步。如果你的问题得到了回答，你为什么不关闭赏金？赏金结束后，就在这里是手动奖励奖金的24小时宽限期。只需单击每个答案旁边的奖金奖励图标，即可将您的奖金永久奖励给回答者。已完成此操作。
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}`);
});