title: Storing text() retrieved after a mouseover() event as a variable to be used to query a JSON string
body: <p>I am attempting to query a JSON string dynamically based on a particular element being hovered upon. The elements are P tags which only have text that equals the players' name. </p>
  
  <p>The script (contains the json string): </p>
  
  <pre><code>&lt;script&gt;
  var statName = "hello";
  
  $(function() {
      $( "#dialog" ).dialog({
        width: 150,
        position: {my: "center", at: "right", of:".baseball-container"},
        autoOpen: false,
        show: {
          effect: "blind",
          duration: 1000
        },
        hide: {
          effect: "explode",
          duration: 1000
        }
      });
      $(".players").mouseover(function() {
          $( "#dialog" ).dialog( "open" );
          var statName = $(this).text();
          alert(statName);
  
      });
  });
  
  $players='{"Player One":{"avg":"400","gp":"2","gs":"2","ab":"5","r":"0","h":"2"},
             "Player Two":{"avg":"500","gp":"2","gs":"0","ab":"2","r":"1","h":"1"}}'
  
  var json = JSON.parse($players);
  &lt;/script&gt;
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;p id="draggable" class="players player-one"&gt;Player One&lt;/p&gt;
  &lt;p id="draggable" class="players player-two"&gt;Player Two&lt;/p&gt;
  </code></pre>
  
  <p>Dialog box:</p>
  
  <pre><code>&lt;div id="dialog" title="Statistics"&gt;
   &lt;script&gt;
    document.write(statName);
    document.write(json[statName].avg);
   &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Of course the one which appears in the dialog box is "hello" while the "alert" is the correct player name. Is there any way I can either change the first "statName" variable to be the one inside of the function (when the user hovers over that player), or is there a way for me to just define statName based off whatever item is hovered on dynamically.</p>
  
  <p>I tried to write a Javascript function which would return the result of the text() retrieved on mouseover() and store it as a variable but this didn't work for me. At best I got "Object Object" as a result.</p>
  
  <hr>
  
  <p>Essentially I need to turn statName within</p>
  
  <pre><code>    $(".players").mouseover(function() {
          $( "#dialog" ).dialog( "open" );
          statName = $(this).text();
  
      });
  </code></pre>
  
  <p>into a global variable I can use later in the page.</p>