title: how to wait for user to click then console log variable
body: <p>So right now I am having some trouble with the async/await functions and my goal is to update a variable when the user clicks a button. After this is done then I console log the updated variable. For example in my code I create a global variable called result and then I have a function with an event listener to change the value of the variable when the button is clicked but when I console log the variable I get an undefined variable and not the value I set it to.
  Here is the code:
  JS file</p>
  <pre><code>let onlyBtn = document.getElementById(&quot;onlyButton&quot;);
  
  
  let result;
  
  async function realMain(){
  
     await step();
     console.log(result);
  
  }
  
  async function step(){
      return new Promise((resolve) =&gt;{
          onlyBtn.addEventListener(&quot;click&quot;, function(){
              result = &quot;nice&quot;;
              
          });
          resolve();
      });
      
          
  }
  
  realMain();
  </code></pre>
  <p>HTML file:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div&gt;
          &lt;button id=&quot;onlyButton&quot;&gt;Run&lt;/button&gt;
      &lt;/div&gt;
      
  
  
      &lt;script src=&quot;app.js&quot;&gt;
          
      &lt;/script&gt;
  
      
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>How can I make it so I have to wait for the function where the update is done, then I console log the updated variable?</p>