我如何使用“點擊”功能對 foreach 循環的結果進行 console.log 記錄？

Question

抱歉，如果這真的很簡單，但我已經研究了一個星期，但找不到可以輸入谷歌的正確內容。

我有 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 內容。

幫助表示贊賞。

Answer 1

您在 click 事件中記錄按鈕的值。

此外，您應該將按鈕的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>

Answer 2

您可能會想到Array.prototype.map ，它將返回的結果組合成一個數組。

但是，這在您的情況下不起作用，因為您只是在循環中添加一個事件偵聽器。 事件回調只會在按鈕被點擊時觸發。 您需要編寫異步代碼。 例如，當按下按鈕時，調用帶有結果的函數pickedValue() ，然后該函數將繼續您的程序。