addEventListener 點擊事件不起作用

Question

我正在做一個有 UI 的剪紙剪刀項目。 所以，我有四個按鈕，開始游戲，石頭，紙和剪刀。 以前我單獨編寫代碼並且它可以工作。 但是現在因為我希望單擊按鈕的結果成為另一個函數的輸入。 因此，我嘗試在下面的代碼中將所有按鈕完全分組。 但是，似乎該按鈕似乎不起作用，但沒有錯誤。 我不知道為什么？ 下面是我的代碼：

------------- HTML ---------------

<!DOCTYPE html>

<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <title>Project Rock Paper Scissors</title>
        <script src = "javascript.js" defer> </script>
    </head>

    <body>
        <div class="btn-group">
            <button id="startgame"> Start game </button>
            <button id="rock"> Rock </button>
            <button id="paper"> Paper </button>
            <button id="scissor"> Scissor </button>
        </div>
        
        
    </body>

</html>

------------ Javascript ---------------

const button = document.querySelector(".btn-group");
const startGame = document.querySelector('#startgame');
const rock = document.querySelector('#rock');
const paper = document.querySelector('#paper');
const scissor = document.querySelector('#scissor');

 button.addEventListener('click', function(selection) {
        if (selection === startGame) {
            startGame.addEventListener('click', () => {
            alert("Choose Rock, Paper or Scissor");
            })
        }  else if (selection === rock) {
             rock.addEventListener('click', () => {
                let item = "rock";
                return item.toLowerCase();
            })
        }  else if (selection === paper) {
            paper.addEventListener('click', () => {
                let item2 = "paper";
                return item2.toLowerCase();
            })
        } else if (selection === scissor) {
            scissor.addEventListener('click', () => {
                let item3 = "scissor";
                return item3.toLowerCase();
            })
            }            
    })

------------ 上面的 Js 代碼用作下面的函數 playRound(.... , ....) 的參數 ------------

function playRound(playerSelection, computerSelection)  {
        if (playerSelection === "Paper".toLowerCase()  && computerSelection.toLowerCase()  === "Rock".toLowerCase() )  {
            console.log(`Player choose ${playerSelection} and computer plays ${computerSelection} player wins !`);
        } else if (playerSelection  === "Scissor".toLowerCase()  && computerSelection.toLowerCase() === "Paper".toLowerCase() ) {
            console.log(`Player choose ${playerSelection} and computer plays ${computerSelection} player wins !`);
        }  else if (playerSelection  === "Rock".toLowerCase()  && computerSelection.toLowerCase() === "Scissor".toLowerCase() ) {
            console.log(`Player choose ${playerSelection} and computer plays ${computerSelection} player wins !`);
        }  else if (playerSelection  ===  computerSelection.toLowerCase()  ) {
            console.log(`Player choose ${playerSelection} and computer plays ${computerSelection} game is draw !`);
        } else {
            console.log(`Player choose ${playerSelection}, computer plays ${computerSelection}, computer wins !`);
    }
}

Answer 1

您的代碼中有一個錯誤，其中selection是一個事件對象，而不是生成事件的元素：

 button.addEventListener('click', function(selection) { ...

您的if語句將selection （事件對象）與被單擊的元素進行比較，這就是它被跳過的地方。 在事件對象selection ，您將找到target屬性：請參閱https://developer.mozilla.org/en-US/docs/Web/API/Event/target

所以你可以這樣寫你的 if 語句：

if ( selection.target == startgame ) { ....

最后，事件偵聽器位於外部 div 上，而不是每個按鈕本身。

Answer 2

那里有幾個問題：

在將單擊處理程序添加到按鈕本身之前，您要等到.btn-group中的任何位置發生單擊。 這沒有任何意義。 您可以在.btn-group上使用整體單擊處理程序並使用事件委托來確定按下了哪個按鈕，或者在各個按鈕上使用事件處理程序（在這種特定情況下可能更簡單）。
事件處理程序接收事件對象，而不是元素，因此selection永遠不會匹配startgame或任何其他。 事件對象的target屬性是指事件所針對的元素，因此您的標記將匹配您的按鈕之一（但請注意，如果您有<button><strong>xyz</strong></button> ，它將是strong元素，而不是button元素，所以你必須處理它，也許用closest ）。
您正在從內部事件處理程序返回item.toString() ，但這並沒有做任何有用的事情。 addEventListener事件處理程序的返回值被完全忽略。

修復 #1 和 #2 的簡單方法是（在這種情況下）完全刪除.btn-group處理程序並直接連接按鈕。 要修復 #3，您必須為自己提供一些在 DOM 中顯示該信息的方法。 有很多方法可以做到這一點，所以我不會在這里詳細說明，但你不能只是退回它並讓任何有用的事情發生。

Answer 3

如果要在單擊.btn-group時添加事件：

const button = document.querySelector(".btn-group");
const startGame = document.querySelector('#startgame');
const rock = document.querySelector('#rock');
const paper = document.querySelector('#paper');
const scissor = document.querySelector('#scissor');

function addEvents(){
    startGame.addEventListener('click', () => {
        alert("Choose Rock, Paper or Scissor");
    })
     rock.addEventListener('click', () => {
        let item = "rock";
        return item.toLowerCase();
    })
    paper.addEventListener('click', () => {
        let item2 = "paper";
        return item2.toLowerCase();
    })
    scissor.addEventListener('click', () => {
        let item3 = "scissor";
        return item3.toLowerCase();
    })
}

button.addEventListener('click', addEvents)

addEventListener 點擊事件不起作用

問題描述

3 個解決方案

解決方案1
3 2022-07-23 09:33:30

解決方案2
2 2022-07-23 09:33:50

解決方案3
0 2022-07-23 09:42:11

addEventListener 點擊事件不起作用

問題描述

3 個解決方案

解決方案1 3 2022-07-23 09:33:30

解決方案2 2 2022-07-23 09:33:50

解決方案3 0 2022-07-23 09:42:11

解決方案1
3 2022-07-23 09:33:30

解決方案2
2 2022-07-23 09:33:50

解決方案3
0 2022-07-23 09:42:11