title: Variables always return a value of undefined
body: <p>I apologize if this question is formatted improperly, this is my first post on SO and my first real point of getting stuck.</p>
  <p>In the below code, the functions playerChoice and computerChoice are supposed to return a value of either 'rock', 'paper', or 'scissors'. But every time I log them in the console, they appear as undefined and I can't compare the two choices. I need these values to continue developing the web page otherwise the code can't do anything to compare the choices. I'll show where I tried manipulating them below (they are marked with ***:)</p>
  <p>(I only showed where I tried to put the 'rock' value because scissors and paper were put in the same places.</p>
  <p>Any help is greatly appreciated.</p>
  <pre><code>// buttons to be manipulated
  const newButton = document.getElementById('newGameButton'); 
  const rockSelect = document.getElementById('rockPicture');
  const paperSelect = document.getElementById('paperPicture');
  const scissorSelect = document.getElementById('scissorPicture');
  
  // image or text fields to be manipulated
  const playerWeapon = document.getElementById('playerWep');
  const compWeapon = document.getElementById('compWep');
  const pWepLabel = document.querySelector('.playerWeaponLabel');
  const compWepLabel = document.querySelector('.compWeaponLabel');
  const roundResult = document.getElementById('roundResult');
  const playerScore = document.getElementById('scoreplayer');
  const compScore = document.getElementById('scoreComp');
  const img = '';
  const src = ''; 
  
  // player onclick function
  
  let playerChoice = '';
  
  function playerPlay() {
      
      rockSelect.addEventListener('click', function(){
  
          *** TRIED PLACING playerChoice = 'rock' HERE, LOGGED UNDEFINED ***
  
          chooseRock();
          computerPlay();
          if (document.getElementById('imageP')) {
              (document.getElementById('imageP')).remove();
          }
          const img = document.createElement('img');
          img.className = 'rock';
          img.id = 'imageP';
          img.src = 'images/rock1.png';
          const src = document.getElementById('playerWep');
          src.appendChild(img);
  
          *** TRIED PLACING playerChoice = 'rock' HERE, LOGGED UNDEFINED ***
  
       
      })
      paperSelect.addEventListener('click', function(){
          choosePaper();
          computerPlay();
          if (document.getElementById('imageP')) {
              (document.getElementById('imageP')).remove();
          }
          const img = document.createElement('img');
          img.className = 'paper';
          img.id = 'imageP';
          img.src = 'images/paper1.png';
          const src = document.getElementById('playerWep');
          src.appendChild(img);
  
          
        
      })
      scissorSelect.addEventListener('click', function(){
          chooseScissors();
          computerPlay();
          if (document.getElementById('imageP')) {
              (document.getElementById('imageP')).remove();
          }
          const img = document.createElement('img');
          img.className = 'scissors';
          img.id = 'imageP';
          img.src = 'images/scissors1.png';
          const src = document.getElementById('playerWep');
          src.appendChild(img);
          
      })
      
      function chooseRock() {
          pWepLabel.innerHTML = 'Rock';
  
          *** TRIED PLACING playerChoice = 'rock' HERE, LOGGED UNDEFINED ***
      }
      function choosePaper() {
          pWepLabel.innerHTML = 'Paper';
          
      }
      function chooseScissors() {
          pWepLabel.innerHTML = 'Scissors';
          
      }
  
      return playerChoice;
      
  }
  </code></pre>