I'm facing an issue with dynamically updating background colors of specific elements using ajax, JSP, and a servlet call. Even though all the lines of code seem to be executing, there is no visible change on the front end. I've attached my JS functions along with a screenshot showing the servlet and console log. Any assistance would be highly appreciated! I also attempted to create another JS function to handle the background changes, but unfortunately, that didn't resolve the problem.
<script>
function validate() {
console.log("hello");
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "/"+window.location.pathname.split("/")[1]+"/HomeServlet?inputName=" + document.searchform.search.value, false);
xhttp.send();
if (xhttp.responseText.trim().length > 0) {
console.log("in if statement " + xhttp.responseText);
var str = xhttp.responseText;
var result = str.split(" ");
console.log("str " + str + " - result: " + result + " result size = " + result.length);
for(var i = 0; i < result.length; i++) {
console.log("in first loop");
console.log("value:" + result[i]);
elements = document.getElementsByClassName(result[i]);
console.log("elements: " + elements.length);
for (var j = 0; j < elements.length; j++) {
console.log("in the loop");
//elements[j].style.backgroundColor = "red";
changeBg(elements[j]);
}
}
//return false;
}
return true;
}
function changeBg(element) {
alert(window.getComputedStyle(element).backgroundColor);
element.style.color = "red";
}
</script>
The console output in my browser confirms that each line of code is being executed, including displaying the alert box, but for some reason, the element.style.color or backgroundColor is not changing as expected despite trying both approaches.