javascript - 如何根据最近点击的按钮调用不同的功能？

Question

我有以下代码，其中有两个按钮“按钮 1”和“按钮 2”。我想在指定的段落中有 2 个不同的文本。如果单击“按钮 1”，则文本应显示“单击按钮 1”。如果单击“按钮 2”，则文本应显示“单击按钮 2”。如果我们没有单击任何按钮，则文本应显示“未单击任何按钮。”

function btnSelector() {
  var x = document.getElementById("btn1")
  var y = document.getElementById("btn1")
  var z = document.getElementById("demo")
  if (x.click == "true") {z.innerHTML = "Button 1 was clicked."}
  
  else if (y.click == "true") {z.innerHTML = "Button 2 was clicked."}
  
  else {z.innerHTML = "No button was clicked."}
}

<p id="demo"></p>
<button id="btn1" value="enter"/>Button 1</button>
<button id="btn2" value="enter"/>Button 2</button><br><br>
<button id="proceed" onclick="btnSelector()">Proceed</button>

我面临的问题是我的代码没有检测到对两个按钮的任何点击。需要您的帮助!

P.S:这只是我在这里编写的示例代码。在我的主项目中，我需要根据最近单击的按钮调用不同的函数，但我希望如果我找到此示例代码的解决方案，它肯定有助于解决我的主项目中的问题。

Answer 1

这不是事件处理程序的工作方式。您可能想在 MDN 上阅读有关它们的信息:https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

查看下面的代码以获得提示。

function btnSelector(btnID) {
  const z = document.getElementById('demo')
  switch(btnID) {
    case 0:
      z.innerHTML = "No button was clicked."
      break
    case 1:
       z.innerHTML = "Button 1 was clicked."
       break
    case 2:
       z.innerHTML = "Button 2 was clicked."
       break
  }
}

<p id="demo"></p>
<button id="btn1" value="enter" onclick="btnSelector(1)">Button 1</button>
<button id="btn2" value="enter" onclick="btnSelector(2)">Button 2</button><br><br>
<button id="proceed" onclick="btnSelector(0)">Proceed</button>