title: JavaScript addEventListener & initializing function conflicting, trying to update global variable
body: <p>I'm developing a game interaction menu, and it is a HTML menu that will show actions depending on what job the player is having at the moment. </p>
  
  <p>My issue: I retrieve information about the players job via window.addEventListener. It's being sent from my game Lua file to JavaScript. I can confirm that this is working. However, on the JavaScript part there are problems. </p>
  
  <p>The job is being stored/retrieved/updated in the addEventListener under item.updateJob, as a variable named playerJob. This will also update the global variable with the same name. As you can see in the code, the init() function is being run before the window.addEventListener. init() has to use the updated global variable playerJob to show the correct menu, but it does not. When debugging it in the console it tells me it is "undefined". I have tried to put the window.addEventListener above the init() function inside §( function ... code, but that didn't do anything.</p>
  
  <p>How can I make sure that the window.addEventListener is being run and set the playerJob variable before init() function does anything at all? I tried placing a global variable on top and did this: playerJob = "police", then it worked fine. Anyone knows how I can do this?</p>
  
  <pre><code>    var playerJob;
  
      $( function() {
          // Adds all of the correct button actions 
              console.log("Before int: ", playerJob)
              init();
  
          // Gets the interactionmenu div container 
          var interactionContainer = $( "#interactionmenu" );
  
          // Listens for NUI messages from Lua 
          window.addEventListener( 'message', function( event ) {
              var item = event.data;
  
  
              // Show the menu 
              if ( item.showmenu ) {
                  ResetMenu()
                  interactionContainer.show();
              }
  
              if ( item.hidemenu ) {
                  interactionContainer.hide(); 
              }
  
              // This will update the players job, and does work!
              if ( item.updateJob ) {
                  playerJob = item.job; 
                  setJob(playerJob);
                  console.log("playerJob set to: ", playerJob)
              }                   
          } );
      } )
  
      // Hides all div elements that contain a data-parent, in
      // other words, hide all buttons in submenus. 
      function ResetMenu() {
          $( "div" ).each( function( i, obj ) {
              var element = $( this );
  
              if ( element.attr( "data-parent" ) ) {
                  element.hide();
              } else {
                  element.show();
              }
          } );
      }
  
      // Configures every button click to use its data-action, or data-sub
      // to open a submenu. 
      function init() {
          // Loops through every button that has the class of "menuoption"
          $( ".menuoption" ).each( function( i, obj ) {
  
              // If the button has a data-action, then we set it up so when it is 
              // pressed, we send the data to the lua side. 
              if ( $( this ).attr( "data-action" ) ) {
                  $( this ).click( function() { 
                      var data = $( this ).data( "action" ); 
  
                      sendData( "ButtonClick", data ); 
                  } )
              }
  
              // If the button has a data-sub, then we set it up so when it is 
              // pressed, we show the submenu buttons, and hide all of the others.
              if ( $( this ).attr( "data-sub" ) ) {
                  $( this ).click( function() {
                      var menu = $( this ).data( "sub" );
                      var element = $( "#" + menu ); 
                      element.show();
                      $( this ).parent().hide();  
                  } )
              }
  
              // Here I'd like to know the playerJob, and want via item.updateJob in the addEventListener
              // However it returns undefined, no matter if I place the init() above or below
              // My question is: how can I make sure the item.updatePlayer job in the addEventListener updates
              // the variable globally and makes sure that it does that before this function is being run? 
              console.log("right before data-require: ", playerJob)   // returns undefined X amount of times.         
  
              if ( ( $( this ).attr ( "data-require" ) == "police" &amp;&amp; playerJob != "police") ) {
                  $( this ).hide();
              }
  
              else if ( ( $( this ).attr ( "data-require" ) == "mecano" &amp;&amp; playerJob != "mecano") ) {
                  $( this ).hide();
              }
  
              else if ( ( $( this ).attr ( "data-require" ) == "ambulance" &amp;&amp; playerJob != "ambulance") ) {
                  $( this ).hide();
              }
          } );
  
      }
  
      // Send data to lua for processing.
      function sendData( name, data ) {
          $.post( "http://wk_interactionmenu/" + name, JSON.stringify( data ), function( datab ) {
              if ( datab != "ok" ) {
                  console.log( datab );
              }            
          } );
      }
  </code></pre>