title: How using DOM assign value to variable in JS?
body: <p>Hello I'm working on Rock,Paper and Scissors project. I'm stuck at this problem.  I don't know how to assign value to variable using DOM. When user clicks rock button the value of rocks hould be passed to variable and the variable should be used in playRound function. I don't understand how to fix the problem. When I click to button nothing works.</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>//Gives the random item to item var
  function computerPlay() {
    const theArr = ["rock", "paper", "scissors"];
    var item = theArr[Math.floor(Math.random() * 3)];
    return item;
  }
  
  //Returns players selection
  function playerPlay(e) {
    var pItem = e;
    console.log(`${e}`);
    return pItem;
  }
  
  
  
  var r = document.querySelector('.rock').addEventListener('click', playerPlay);
  var p = document.querySelector('.paper').addEventListener('click', playerPlay);
  var s = document.querySelector('.scissors').addEventListener('click', playerPlay);
  
  var play = document.querySelector('.playbtn').addEventListener('click', playRound);
  
  function playRound(playerSelection, computerSelection) {
    playerSelection = playerPlay();
    computerSelection = computerPlay();
  
    if (playerSelection == 'rock' &amp;&amp; computerSelection == 'paper' || playerSelection == 'paper' &amp;&amp; computerSelection == 'scissors' ||
      playerSelection == 'scissors' &amp;&amp; computerSelection == 'rock') {
      window.alert(`${computerSelection} beats ${playerSelection} YOU LOST!`);
    } else if (playerSelection == computerSelection) {
      window.alert(`${computerSelection} and ${playerSelection} it is a DRAW!`);
    } else {
      window.alert(`${playerSelection} beats ${computerSelection} YOU WIN!!!`);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="buttons"&gt;
    &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;
  &lt;/div&gt;
  
  &lt;div class="play-btn"&gt;
    &lt;button class="playbtn"&gt;PLAY&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>