Цикл JavaScript выполняется на консоли, но не в коде
Я пытаюсь создать цикл 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")
}
})
};
Цикл должен работать.
Флажки загружаются динамически? Возможно, они еще не загружены во время выполнения этого кода.
Откуда ты знаешь, что «он не запустится»?
У вас есть несколько window.onload заданий? Будет работать только последний, поскольку они перезаписывают друг друга. Используйте window.addEventListener(), чтобы добавить несколько обработчиков.
Хотя getElementsByName действительно возвращает живой NodeList и, следовательно, имеет метод forEach, этот метод был добавлен позже, поэтому в более старом браузере он может быть реализован неправильно. Трудно сказать без HTML, на котором работает код. Используйте Фрагмент стека, чтобы сделать ваш код работоспособным здесь, в Stack Overflow.
@HereticMonkey Если метод не реализован, вы получите сообщение об ошибке. И в консоли это тоже не сработает.
@Barmar Спасибо за очевидность вашего ответа. Это служит полезным сопоставлением с тем, что на самом деле говорится в моем комментарии, а именно: «в старом браузере это может быть реализовано неправильно». И реализации могут различаться в консоли и браузере.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Причина, по которой код работает в консоли, а не при непосредственном внедрении в вашу страницу, скорее всего, заключается в том, что элементы, которые вы ищете, динамически добавляются на страницу после возникновения события загрузки.
В консоли вы вручную ждете достаточно долго, пока эти элементы окажутся в DOM, прежде чем запускать этот код, но когда код включен в саму страницу, код ищет эти элементы до того, как они попадут в DOM. .
Вам необходимо изменить свой код, чтобы он запускался после добавления динамических элементов (что происходит ПОСЛЕ первоначальной загрузки базового html-документа).
Чтобы добавить к ответу @Lonnie:
Вам необходимо изменить свой код, чтобы он запускался после добавления динамических элементов (что происходит ПОСЛЕ первоначальной загрузки базового html-документа).
У вас есть несколько вариантов:
- Загрузите свой скрипт в конце документа, если он статический, а не
<head>. - Подождите успешного события от вашей платформы (поскольку вы здесь не упомянули ничего подобного, я дам вам независимый от платформы ответ)
- В конце части вашего кода, которая генерирует ваши
platesиlabels, сделайте следующее: (чтобы запустить событиеcomplete)const myCompleteEvent = new Event("plates-loaded"); document.dispatchEvent(myCompleteEvent); - Используйте это так:
document.addEventListener("plates-loaded", () => { const checkboxes = document.getElementsByName("plates"); const labelPlate = document.getElementsByName("labelPlate"); checkboxes.forEach((c, i) => { labelPlate[i].classList.toggle("active", c.checked); }); });
- В конце части вашего кода, которая генерирует ваши
Также очистил ваш код, используя classList.toggle вместо add/remove :)
В чем существенная разница между onload и ожиданием ReadyState == 'complete'?
Я дважды проверил свой ответ и думаю, что он неверен. Я скорректировал его, чтобы теперь он работал с использованием событий завершения :) Спасибо за этот улов @Barmar!
Вам действительно нужно событие для этого? Просто используйте обычную функцию и вызывайте ее после загрузки элементов. Или просто поместите код в вопрос после загрузки элементов.
Это правда, но это делает несколько предположений о доступе к коду и взаимодействии. Я предлагал обобщенный способ работы с независимым кодом на обоих концах, который просто позволял чему-либо «подключаться» к состоянию завершения.
Есть ли ошибки в вашей консоли? Пожалуйста, отредактируйте свой вопрос, включив в него соответствующий HTML-код, чтобы создать минимальный воспроизводимый пример.