title: Ajax Call Only Works the First Time
body: <p>My JavaScript/ajax code works the first time, but not there after. The <code>GetAttribute</code> element is null when the function is called again.  I have try using <code>createElement</code> and <code>AppendChild</code>, but it does the same thing. If I didn't need the <code>getAttribute</code> it would work fine, but I cannot get the function to work with the <code>getAttribute</code> method.  Any help would be appreciated.</p>
  <pre><code>function ajaxFunction(Picked) { 
  var getdate = new Date();
   if(xmlhttp) { 
      var Pic1 = document.getElementById(&quot;Pic1&quot;).getAttribute(&quot;name&quot;);
      var Pic2 = document.getElementById(&quot;Pic2&quot;).getAttribute(&quot;name&quot;);
      if (Picked === Pic1 ){
      var Chosen = Pic1;
      var NotChosen = Pic2;
  }
  else {
      var Chosen = Pic2;
      var NotChosen = Pic1;
  }
      xmlhttp.open(&quot;POST&quot;,&quot;choice.php&quot;,true);
      xmlhttp.onreadystatechange  = handleServerResponse;
      xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlhttp.send(&quot;Chosen=&quot; + Chosen + &quot;&amp;NotChosen=&quot; + NotChosen );
      }
   }
  
  function handleServerResponse() {
    if (xmlhttp.readyState == 4) {
    if(xmlhttp.status == 200) {
         var response = xmlhttp.responseText;
         response = response.split(&quot;|&quot;);
         document.getElementById('Pic1').innerHTML = response[0];//New Pic
         document.getElementById('Pic2').innerHTML = response[1];        
    }
    else {
      alert(&quot;Error. Please try again&quot;);
    }
   }
  }
  </code></pre>