title: When I click a button on a webpage, how to pass the value of that button as a parameter of a function?
body: <p>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 <code>addEventListener</code> does work but one of the actual parameters of a function that I'm passing as a parameter to the event listener &quot;the console said it is undefined&quot;.</p>
  <p>I just want when clicking the button to pass the value of that button to this parameter I'm talking about.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);});</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="rock"&gt;ROCK&lt;/button&gt;
  &lt;button class="paper"&gt;PAPER&lt;/button&gt;
  &lt;button class="scissors"&gt;SCISSORS&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>