Question

我有以下带有两个按钮“ Button 1”和“ Button 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>

Answer 2

这种类型的问题很适合event delegation。通过这种方法，您可以（在父元素上）添加单个委托的事件侦听器，而不是多个事件侦听器（每个button一个）。

仅由于DOM中event propagation (bubbling and capturing)的性质，才可以使用此技术。

const demoEl = document.querySelector('#demo');
const getButtonDescription = e => {
  if (e.target.tagName === 'BUTTON') {
    return e.target.textContent;
  }

  return 'nothing';
};

document.querySelector('#container').addEventListener('click', e => {
  const desc = getButtonDescription(e);
  demoEl.textContent = desc ? `You clicked ${desc}` : '';
});

<div id="container">
  <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">Proceed</button>
</div>

您可以在示例中看到，我已将所有HTML括在div和id='container'中。我将事件侦听器添加到了容器div上，除此之外没有其他地方了：

Answer 3

更多相同的东西，这就是我要做的：

var btns = document.getElementsByTagName('button'); // set variable for the buttons
for (var i=0; i < btns.length; i++) { // loop the buttons
  btns[i].addEventListener('click', function() { // add Event Listener
	document.getElementById('demo').textContent = 'Button ' + this.id + ' clicked! '; // Write the click message
  });
}

<p id="demo">No button was clicked</p>
<button id="btn1" value="enter"/>Button 1</button>
<button id="btn2" value="enter"/>Button 2</button><br><br>
<button id="proceed">Proceed</button>

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

3 个答案: