On my website, there is a button array that displays the position of a robot by reading a text file using a php/ajax combo. The script initially sets all buttons to the same color and changes the color of the button to represent the robot's position.
function updateRobotPosition(){
setInterval(function(){
document.getElementById("A").style.background ="#008000";
document.getElementById("B").style.background ="#008000";
document.getElementById("C").style.background ="#008000";
document.getElementById("D").style.background ="#008000";
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200){
console.log(request.responseText);
if (request.responseText == 'A'){
document.getElementById("A").style.background ="#ff6600";
} else if (request.responseText == 'B'){
document.getElementById("B").style.background ="#ff6600";
} else if (request.responseText == 'C'){
document.getElementById("C").style.background ="#ff6600";
} else if (request.responseText == 'D'){
document.getElementById("D").style.background ="#ff6600";
} else if (request.responseText == 'E'){
document.getElementById("E").style.background ="#ff6600";
} else {
document.getElementById("A").style.background ="#ff6600";
}
}
}
request.open('POST', 'positionupdate.php', true);
request.send();
},3000);}
Although the php script successfully retrieves the correct character from the text file as displayed in the console log, my script does not process it correctly and always triggers the 'else' condition.
Any troubleshooting suggestions?
Edit: Here is the console log for reference: https://i.sstatic.net/RZlmg.png