title: Get value from event listener and apply it to global variable
body: <p>I apologize if that title is confusing, so let me explain. I'm creating a Hangman Game to improve my HTML/CSS/Javascript skills. The HTML/CSS is all complete and functions, but the issue is with my javascript.</p>
  
  <p>Basically my javascript works like this:
  A user clicks the start button, the game function begins. Once the game begins, the user can type a letter and click 'submit.'  The user's input should update the global variable, userInput but it does not. If my understanding is right (from looking around stack overflow unsure of the exact phrasing of my problem), this is something that cannot be done because of the async and scope nature of javascript. Is this correct? If not, is there any advice I can get on making it work?</p>
  
  <pre><code>let userInput = '';
  function getValue(e) {
    e.preventDefault();
    userInput = document.getElementById('inputText').value.toLowerCase();
    form.addEventListener('click', form.reset());
    //console.log(userInput); &lt;-- works
  }
  
  function hangMan(e) {
    submit.addEventListener('click', getValue);
    const word = getWords(words);
    const MAX_ATTEMPTS = word.length + 3;
    console.log(userInput) &lt;-- does not
    let attempt = 0;
    let win = false;
    dashedWord = getWordBlanks(word);
    wordBlanks.innerHTML = dashedWord;
  
    while (attempt &lt;= MAX_ATTEMPTS &amp;&amp; win === false) {
      let checkedWord = checkAndReplaceCharacter(word, dashedWord, userInput);
      if (checkedWord === word) {
        win = true;
      } else {
        wordBlanks.innerHTML = checkedWord;
      }
      attempt += 1;
    }
  }
  
  function main() {
    startButton.addEventListener('click', hangMan);
  }
  
  main();
  </code></pre>