Rock Paper Scissors DOM, function parameter e doesn't work

Hi. I’m trying to do the rock, paper scissors with UI exercise. I have a problem in my code that I don’t undertand. I wanna set the playerSelection value by accessing the inner text of button, but when I run the playRound function in the console I get this error: Uncaught TypeError: Cannot read property ‘target’ of undefined at playRound. I believe there’s a problem with the e parameter, but I don’t know what is wrong.

let buttons = document.querySelectorAll('button');

buttons.forEach((button) => 
    button.addEventListener('click', playRound)
);

function playRound(e) {
    let playerSelection = e.target.innerText;
    let computerSelection = computerPlay();
    ....
}

Hi an alternative could be

buttons.forEach((button) => 
         button.addEventListener('click', (e)=>{
                playRound(e.target.innerText);
         })
);

and redefine playRound to recive playerSelection as input.

If you want to see what is happening, you can add messages in playRound

  console.log(`This is an event  ${e}`)
  console.log(`This is a DOM  ${e.target}`)
  console.log(`This is a string  ${e.target.innerText}`)

Also i woud try

    button.addEventListener('click', playRound(e))

but i think what you write is right.

Hope this will help.

1 Like

Thank you. The problem is fixed now.