Hi, I'm new to JavaScript and AJAX!
I've got a piece of JavaScript code that successfully updates an HTML table element within a div using AJAX whenever the state of a select element changes.
However, I'm struggling with getting an opacity animation to work after the update. Chrome's JavaScript console is throwing an error saying:
Uncaught TypeError: Cannot read property 'style' of undefined
This error specifically points to line 2 in my JavaScript code.
Here is the JavaScript code causing the issue:
function fadeIn(objectToFade) {
objectToFade.style.opacity = parseFloat(objectToFade.style.opacity) + 0.1;
if (objectToFade.style.opacity < 1) {
setTimeout(function() { fadeIn(objectToFade); }, 50);
}
}
function fadeOut(objectToFade) {
objectToFade.style.opacity = parseFloat(objectToFade.style.opacity) - 0.1;
if (objectToFade.style.opacity > 0.2) {
setTimeout(function() { fadeOut(objectToFade); }, 50);
}
}
function changeClient(client) {
var clientTableDiv = document.getElementById("clientTable");
var xmlhttp = new XMLHttpRequest();
fadeOut(document.getElementById("MetricsStatsByClient"));
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
clientTableDiv.innerHTML = xmlhttp.responseText;
fadeIn(document.getElementById("MetricsStatsByClient"));
}
}
xmlhttp.open("GET","functions.php?fct=cc&client=" + client, true);
xmlhttp.send();
}
It seems like there is an issue with recognizing the "style" property. Any idea what could be wrong here?
Thanks in advance for your help!
UPDATE 1
After fixing the recursive calls, I am now encountering NaN (Not a Number) when trying to run this line in the changeClient function:
alert(parseFloat(document.getElementById("MetricsStatsByClient").style.opacity));