Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

402
Views
When I click a button on a webpage, how to pass the value of that button as a parameter of a function?

So I'm working in a project recently it is about the rock paper scissor game. I'm stuck in a problem that when I click on one of the three buttons (which are rock, paper, or scissors) the addEventListener does work but one of the actual parameters of a function that I'm passing as a parameter to the event listener "the console said it is undefined".

I just want when clicking the button to pass the value of that button to this parameter I'm talking about.

const rock = document.querySelector('.rock');
const paper = document.querySelector('.paper');
const scissors = document.querySelector('.scissors');
// there are some functions
let computerSelection = computerPlay();

rock.addEventListener('click', function(){
playRound(playerSelection, computerSelection);
});

paper.addEventListener('click', function(){
playRound(playerSelection, computerSelection);});

scissors.addEventListener('click', function(){
playRound(playerSelection, computerSelection);});
<button class="rock">ROCK</button>
<button class="paper">PAPER</button>
<button class="scissors">SCISSORS</button>

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

You have to read the event on each click listener and you can extract the value from the event by ev.target.value:

anyButton.addEventListener('click', function(ev) { 
  playRound(playerSelection, computerSelection, ev.target.value);
}

This, of course, implies that your buttons all have a value attribute set.

As an improvement, you could add add event listeners at once without going through each element:

const allButtons = document.querySelectorAll('button') // adjust this per your DOM
allButtons.forEach((button) => {
  button.addEventListener('click', function(ev) { 
    playRound(playerSelection, computerSelection, ev.target.value);
  })
})
about 4 years ago · Juan Pablo Isaza Report

0

You have to pass playSelection according to wich button the player has clicked:

rock.addEventListener('click', function(){
playRound('rock', computerSelection);
});

paper.addEventListener('click', function(){
playRound('paper', computerSelection);});

scissors.addEventListener('click', function(){
playRound('scissors', computerSelection);
});

But I have a suggestion to do that with only one event handler. First you'll have to say in each button what choice it represents. Do that using data- attributtes (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes):

<button class="rock choice-button" data-choice="rock">ROCK</button>
<button class="paper choice-button" data-choice="paper">PAPER</button>
<button class="scissors choice-button" data-choice="scissors">SCISSORS</button>

Note that I added a choice-button class to each button, so you can access all three at once when adding the event:

// there are some functions
let computerSelection = computerPlay();

document.querySelectorAll('.choice-button')
        .forEach(el => el.addEventListener('click', function(event) {
            playRound(event.target.dataset.choice, computerSelection);
         }));

First I use querySelectorAll to find all elements that matches the choice-button class, then i use forEach function to iterate trought all 3 found buttons and add the same event listener to all of them.

Once the event listener is executed, I used 'event.target' to get access to the clicked button, and called the dataset property to get the value defined in the data-choice attribute.

I know it might seem a bit overhead for only three choices, but since you seem to be learning javascript, its interesting to learn different approaches that might help you in a more complex situation.

about 4 years ago · Juan Pablo Isaza Report

0

The undefined error (and two more that follow it once the initial one is fixed) is caused because you are referencing a function that has not been declared:

let computerSelection = computerPlay();
// computerPlay() is not defined;

If you create the computerPlay() function, the error will go away but a new one will appear because playRound() is also not defined. Again, the function must be declared if it is referenced (although hoisting allows it to be declared after the call in this case).

When that is fixed, the last error arises by the reference to playerSelection as, again, this has not been declared. Assuming the value of playerSelection is to be rock, paper, or scissors, you have to extract it from the click event.

The event handler needs to extract the innerText property value of the event's target. Inside you're event listeners you need:

playerSelection = event.target.innerText;
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!