title: variable in table function is empty when called on other functions
body: <p>I am trying to make a jsp project about an attendance monitoring system. I have a table that contains data retrieved through a database, and have added an event once the user clicked on a row. Once it's clicked, the number of participants in the event row selected would appear in a certain div that I made. It worked, however, I cant find a way to accesss the variable in the onclick function for other functions that needs the variable in the row selected.</p>
  
  <pre><code>&lt;script&gt;
              var event
              $(document).ready(function () {
                  var rows = document.getElementById('table'), rIndex;
                  for (var i = 1; i &lt; table.rows.length; i++) {
                      table.rows[i].onclick = function () {
                          event = this.cells[1].innerHTML; //the important variable needed
                          var houseA = "azul";
                          var houseG = "giallo";
                          var houseC = "cahel";
                          var houseR = "roxxo"
  
                          $("#a").load("dataEvents.jsp", {
                              event,
                              houseName: houseA
                          });
                      }
                  }
              });
              function diffFunction(){
                  alert(event); //returns empty
              }
  &lt;/script&gt; 
  
  </code></pre>