0

我是 JavaScript 和 AJAX 的初学者！

我有一个JavaScript代码，该代码在选择元素的状态更改时，使用AJAX更新HTML表元素（在DIV中包含）。那部分工作得很好。

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

未捕获的类型错误：无法读取未定义的属性“样式”

在 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));
4

2 回答 2

4

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

setTimeout(fadeIn, 50);

所以你需要传递它

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

你的fadeOut也一样。

于 2013-05-17T15:12:48.647 回答
2

当您将fadeOut/传递fadeIn给setTimeout调用时，您没有指定它所期望的元素参数：

if ( objectToFade.style.opacity < 1 ) {
    setTimeout(function () {
        fadeIn(objectToFade);
    }, 50);
}
于 2013-05-17T15:13:52.480 回答