JavaScript 循环在控制台上运行，但不在代码上运行

Question

我正在尝试创建一个 JS forEach 循环，该循环应该在 DOM 完全加载后运行，但由于某种原因它不会在代码上运行，但当我将相同的循环放在控制台上时它运行良好。

window.onload = (event) => {

    var checkboxes = document.getElementsByName("plates")
    var labelPlate = document.getElementsByName("labelPlate")

    checkboxes.forEach((i, index) => {
        if (i.checked) {

            labelPlate[index].classList.add("active")
        } else {
            labelPlate[index].classList.remove("active")
        }
    })
};

循环应该运行。

Answer 1

代码在控制台中工作而不是直接嵌入到页面中时工作的原因可能是因为您正在搜索的元素在加载事件发生后动态添加到页面中。

在控制台中，在运行该代码之前，您需要手动等待足够长的时间让这些元素出现在 DOM 中，但是当代码包含在页面本身中时，代码会在这些元素进入页面之前搜索这些元素。 DOM。

您需要修改代码，以便在添加动态元素后触发它（在初始加载基本 html 文档之后发生）。