表格元素的 JavaScript 不透明度

Question

我是 JavaScript 和 AJAX 的初学者!

我有一个 JavaScript 代码，当选择元素的状态发生变化时，它使用 AJAX 更新 HTML 表格元素(包含在 div 中)。那部分工作得很好。

另一方面，我无法让更新的不透明动画生效。Chrome 的 JavaScript 控制台告诉我:

Uncaught TypeError: Cannot read property 'style' of undefined

在 JavaScript 代码的第 2 行。

这是我的 JavaScript 代码:

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();
}

似乎无法识别“样式”属性。我做错了什么？

谢谢!

编辑 1

修复递归调用的参数后，我在 changeClient 函数中运行它时得到 NaN(不是数字):

alert(parseFloat(document.getElementById("MetricsStatsByClient").style.opacity));

Answer 1

您没有传入对象引用，因此 objectToFade 未定义。

setTimeout(fadeIn, 50);

所以你需要传递它

setTimeout(function() { fadeIn(objectToFade); }, 50);

您的 fadeOut 也一样。