Ajax Call Only Works the First Time

Question

My JavaScript/ajax code works the first time, but not there after. The GetAttribute element is null when the function is called again. I have try using createElement and AppendChild, but it does the same thing. If I didn't need the getAttribute it would work fine, but I cannot get the function to work with the getAttribute method. Any help would be appreciated.

function ajaxFunction(Picked) { 
var getdate = new Date();
 if(xmlhttp) { 
    var Pic1 = document.getElementById("Pic1").getAttribute("name");
    var Pic2 = document.getElementById("Pic2").getAttribute("name");
    if (Picked === Pic1 ){
    var Chosen = Pic1;
    var NotChosen = Pic2;
}
else {
    var Chosen = Pic2;
    var NotChosen = Pic1;
}
    xmlhttp.open("POST","choice.php",true);
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("Chosen=" + Chosen + "&NotChosen=" + NotChosen );
    }
 }

function handleServerResponse() {
  if (xmlhttp.readyState == 4) {
  if(xmlhttp.status == 200) {
       var response = xmlhttp.responseText;
       response = response.split("|");
       document.getElementById('Pic1').innerHTML = response[0];//New Pic
       document.getElementById('Pic2').innerHTML = response[1];        
  }
  else {
    alert("Error. Please try again");
  }
 }
}

Answer 1

Change your if to

if (Picked === Pic1)

By writing if (Picked = Pic1 ), you're assigning Picked to Pic1.