Question

我是JavaScript和AJAX的初学者！

我有一个JavaScript代码，当select元素的状态发生变化时，使用AJAX更新HTML表元素（包含在div中）。那部分完美无缺。

另一方面，我无法获得不透明度动画以使更新生效。 Chrome的JavaScript控制台告诉我：

未捕获的TypeError：无法读取未定义的属性“样式”

在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。

Answer 2

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

if ( objectToFade.style.opacity < 1 ) {
    setTimeout(function () {
        fadeIn(objectToFade);
    }, 50);
}

表元素的JavaScript不透明度

2 个答案: