如何使用“点击”功能来控制台记录 foreach 循环的结果？答案

【问题标题】：How do I console.log the result of a foreach loop with a 'click' function?如何使用“点击”功能来控制台记录 foreach 循环的结果？
【发布时间】：2021-07-22 14:39:20
【问题描述】：

抱歉，如果这真的很简单，但我已经研究了一个星期，但找不到合适的内容输入谷歌。

我有 3 个按钮，如下所示：

const playerSelection = document.querySelectorAll(".buttons").forEach(e => {
  e.addEventListener('click', function() {
    return e.innerHTML;
  })
});

console.log(playerSelection);

<div>
  <button class="buttons">Rock</button>
  <button class="buttons">Paper</button>
  <button class="buttons">Scissors</button>
</div>

当我 console.log playerSelection 它只返回未定义的。我希望 playerSelection 变量等于我单击的任何按钮的 innerHTML 内容。

感谢您的帮助。

【问题讨论】：

你想达到什么目的？您尝试过什么来解决您的问题？
@Nico Haase：两者都差不多。
您希望阅读什么内容？
@Nico Haase 正如我在帖子中所说，我已经尝试用谷歌搜索一个星期了，但找不到我要找的东西，所以认为可能是时候真正发布问题了。
你试过调试代码吗？我会假设forEach 不会返回任何有用的东西，如developer.mozilla.org/docs/orphaned/Web/JavaScript/Reference/… 所述 - 特别是代码调用console.log 的方式独立于可能发生的点击

标签： javascript html

【解决方案1】：

您在点击事件中记录按钮的值。

您还应该将按钮的type 设置为button，否则它们的类型为submit，我猜你不希望在这里。

document.querySelectorAll(".buttons").forEach(e => {
  e.addEventListener('click', function() {
    console.log(e.innerHTML);
  })
});

<div>
  <button type="button" class="buttons">Rock</button>
  <button type="button" class="buttons">Paper</button>
  <button type="button" class="buttons">Scissors</button>
</div>

【讨论】：

【解决方案2】：

您可能会想到Array.prototype.map，它将返回的结果组合成一个数组。

但是，这在您的情况下不起作用，因为您只是在循环中添加了一个事件侦听器。只有当按钮被点击时才会触发事件回调。您需要编写异步代码。例如，当按下按钮时，调用函数pickedValue() 并返回结果，然后继续执行您的程序。

【讨论】：