title: Javascript get title value from <li>
body: <p>In general: What I want is to have PHP output an unordered list with books. When the user clicks on one of the titles, the details will be pulled from the DB and inserted into the page using AJAX.</p>
  
  <p>I can't seem to figure out how to pull the title value from the &lt; li > using javascript, so I can pass that to AJAX. </p>
  
  <p>(To simplify the example code, I left out the AJAX part and am using an alert instead.)</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  
  window.onload = function()
  {
  
        var shelve = document.getElementById( 'books' );
        var books = shelve.getElementsByTagName( 'li' );
        for( var i=0; i &lt; books.length; i++ ){
           books[i].onclick = function(){
          alert(books[i].title); //I know this doesn't work
           };
        }
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="txtHint"&gt;&lt;b&gt;Book info will be listed here using AJAX.&lt;/b&gt;&lt;/div&gt;
  
  &lt;?php show_allBooks(); ?&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;?php
  
  function show_allBooks(){
  
      db_connect();
      $query = "Select * from tblBooks order by title";
      $result = mysql_query($query);
      echo "&lt;ul id='books'&gt;";
      while ($row = mysql_fetch_array($result))
      {
          echo "&lt;li title='" . $row['id'] . "'&gt;" . $row['title'] . "&lt;/li&gt;";
      }
      echo "&lt;/ul&gt;";
      db_close();
  }
  ?&gt;
  </code></pre>
  
  <p>I tried fooling around with variations of the following code, but this did not seem to work either.</p>
  
  <pre><code>books[i].getAttribute("title")
  </code></pre>
  
  <p>Can anyone point me in the right direction? Any help would be greatly appreciated.</p>