函数无法识别初始化的变量

Function does not recognize initialized variable

本文关键字：变量 初始化 识别 函数      更新时间：2023-09-26

抱歉，我没有接受过Javascript的正式培训。我正在尝试制作一个操作加载进度条的函数。我想在完成后将"donezo"类添加到 #ammount。但是，不会添加该类。我相信变量已正确初始化。做一个querySelector而不是"ammount"var似乎确实有效。希望有人能向我解释为什么会这样？非常感谢。

代码笔在这里

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

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

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

另一种选择是仔细修改 DOM，而不分配给innerHTML，我建议做后者。

相关文章：