javascript 如何使用eventListener获取按钮的值?

2sbarzqh  于 2023-05-12  发布在  Java
关注(0)|答案(3)|浏览(233)

我在HTML中创建了具有不同值的按钮。我试图在点击时输出这些值。我正在使用querySelectorAll和eventListeners,但它一直输出undefined。

let buttons = document.querySelectorAll('button');
function showNumber() {
  if (buttons.value != 5) {
    document.getElementById('screen').innerHTML = buttons.value;
  } else {
    document.getElementById('screen').innerHTML = 5;
  }
}
buttons.forEach(buttons => {
  buttons.addEventListener("click", () => {
    showNumber()
  });
});
vc6uscn9

vc6uscn91#

你可以这样做:

const
  buttons = document.getElementsByTagName("button"),
  screen = document.getElementById('screen');

Array.from(buttons).forEach(button =>
  button.addEventListener("click", showNumber));

function showNumber(event) { // Listener can access its triggering event
  const button = event.target; // event's `target` property is useful
  if (button.value != 5) { screen.innerHTML = button.value; }
  else { screen.innerHTML = 5; }
}
<button value="5">Button 1</button>
<button value="42">Button 2</button>

<p id="screen"></p>

但您可以考虑使用event delegation

const
  container = document.getElementById('container'),
  screen = document.getElementById('screen');
container.addEventListener("click", showNumber); // events bubble up to ancestors

function showNumber(event) {
  const clickedThing = event.target;
  if(clickedThing.tagName == 'BUTTON'){ // makes sure this click interests us
    screen.innerHTML = clickedThing.value;
  }
}
<div id="container">
  <button value="5">Button 1</button>
  <button value="42">Button 2</button>
</div>

<p id="screen"></p>
9wbgstp7

9wbgstp72#

在你的foreach循环中你需要将按钮传递回你的函数

let buttons = document.querySelectorAll('button');
function showNumber(button) {

  if (button.value != 6) {
    document.getElementById('screen').innerHTML = button.value;
  } else {
    document.getElementById('screen').innerHTML = 5;
  }
}

buttons.forEach(button => {

  button.addEventListener("click", () => {
    showNumber(button)
  });
});
<button value=10>10</button>
<button value=8>8</button>
<button value=6>6</button>
<button value=4>4</button>
<button value=2>2</button>

<div id='screen'></div>
6ss1mwsb

6ss1mwsb3#

问题是buttons是 * 整个按钮数组 *,而不仅仅是单击的按钮。
要访问单击的按钮,最简单的方法是使用this。在事件处理程序中,this指向触发事件的元素(即单击的按钮),只要我们将函数showNumber直接绑定到事件处理程序(而不是像初始代码中那样从匿名函数调用showNumber()),即:

button.addEventListener("click", showNumber);

因此,将showNumber直接绑定到事件处理程序并使用this,这就是我们可以做的:

let buttons = document.querySelectorAll('button');
function showNumber() {
  document.getElementById('screen').innerHTML = this.value;
}
buttons.forEach(button => {
  button.addEventListener("click", showNumber);
});
<p id="screen"></p>
<button value="1">1</button>
<button value="10">10</button>

编辑:删除了showNumber函数中不必要的if语句。

相关问题