Question

道歉，我没有正式的Javascript培训。我正在尝试创建一个操作加载进度条的函数。我想在完成后将“donezo”类添加到#ammount。但是，该课程没有被添加。我相信变量是正确初始化的。执行querySelector而不是“ammount”var似乎确实有效。希望有人可以解释为什么这是我的情况？非常感谢。

codepen here

(function move() {
    var ammount = document.getElementById("ammount");
    var counter = document.getElementById("counter");
    var wrapper = document.getElementById("wrapper");
    var status = 1;
    var loader = setInterval(fireZeLoader, 10);

    function fireZeLoader() {
        if (status >= 100) {
            clearInterval(loader);
            wrapper.innerHTML = wrapper.innerHTML + '<div class="finished">Complete</div>';
            ammount.classList.add("donezo");
        } else {
            status++;
            ammount.style.width = status + '%';
            counter.innerHTML = status + '%';
        }
    }
}());

Answer 1

这是因为当您修改wrapper.innerHTML时，会重新创建wrapper内的DOM。也就是说，您之前获得的所有引用现在都指向不再出现在屏幕上的对象。你可以交换这两行：

ammount.classList.add("donezo");
wrapper.innerHTML = wrapper.innerHTML + '<div class="finished">Complete</div>';

另一种选择是carefully modify DOM而不指定innerHTML，我建议你选择后者。

函数无法识别初始化变量

1 个答案: