Почему не работает код?

@crypton_ua · Регистрация: 12.02.2017

Студворк — интернет-сервис помощи студентам

Недавно начал изучать JavaScript, до этого неполохо освоил HTML и CSS. Писал довольно неплохие сайты лишь на них уже через пару дней после изучения. Но вот решил взяться собственно программирование и решил начать с JS.
Учил с разных сайтов теорию, но имея уже некоторый опыт при изучении языков разметки, - понял что лучшее в этом деле - это практика, поэтому пробую хоть что-то писать, хотя бы какую-то примитивщину. Сперва всё шло хорошо, но вот уже целый день сижу над одним приколом. Заранее извиняюсь за нубский вопрос...

Не могу понять почему не работает этот код?

JavaScript
1
2
3
4
5
6
7
8
9
10
function blim (){
document.getElementsByTagName('body').style.backgroundImage = "url('photos/1.jpg')";
}
 
function blim2 (){
document.getElementsByTagName('body').style.backgroundImage = "url('photos/111.jpg')";
}
 
setInterval (blim, 1000);
setInterval (blim2, 2000);

Т.е. - нужно, чтобы каждую секунду менялся фон (картинка). Если просто задать название фона, всмысле цвет (red, green и т.д.), то всё работает, а с картинкой почему-то нет. В чём трабл? Может ссылка на фото не так указана? Но я смотрел с других примеров - всё работает! Какая разница между background и backgroundimage? Как же это бесит, когда из-за одного символа код может не работать. Хотя, чувствую, - тут что-то другое.

Также пробовал писать без TagName, просто через document.body.style... нифига
Может через id? К body можно задать id?)))
Хочется сделать смену фона именно через функцию.

Решил обратиться сюда, а то в нете не нашел ничего, хотя не думал что такое возможно. Но иногда просто очень тяжело оформить свой вопрос в поисковый запрос, поэтому решил перейти а форумы, где есть знающие люди.

@Balanaar · 13.02.2017, 10:26

Метод getElementsByTagName() возвращает коллекцию элементов. Даже если элемент в выборке всего один. Соответственно, чтобы обратиться к свойству style элемента <body>, вам следует писать так:

JavaScript
1
document.getElementsByTagName('body')[0].style

Дальше должны сами разобраться.

@whiteapps · 13.02.2017, 13:11

crypton_ua,

JavaScript
1
document.body

@Padimanskas · 13.02.2017, 13:36

crypton_ua,
Еще проверь относительные пути. Возможно они неправильно записаны.

@crypton_ua · 13.02.2017, 17:53 **[ТС]**

Balanaar,
whiteapps,
пробовал и

Сообщение от Balanaar

document.getElementsByTagName('body')[0].style

и

Сообщение от whiteapps

document.body

не работает
пробовал перемещать фото в ту же директорию что и сам файл, тоже ничего... как такое может быть?

Добавлено через 22 минуты
Уже даже с цветом не работает:

JavaScript
1
2
3
4
function blim ()
{
document.body.style.backgroundColor = "lavender";
}

@whiteapps · 13.02.2017, 18:38

crypton_ua, покажите весь код и как вы его вызываете

@crypton_ua · 13.02.2017, 18:47 **[ТС]**

whiteapps,
перенёс код с внешнего файла в сам html-файл и всё заработало, но почему так..?
обычное тело, а во внешнем всё неиспользуемое в комменте, уже всё исключал...

@Balanaar · 13.02.2017, 20:17

Очень частая ошибка новичков. Скорее всего вы исполняете ваш js-код ещё до формирования DOM-дерева. Оберните вызов ваших функций в window.onload

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function blim (){
document.getElementsByTagName('body')[0].style.backgroundImage = "url('photos/1.jpg')";
}
 
function blim2 (){
document.getElementsByTagName('body')[0].style.backgroundImage = "url('photos/111.jpg')";
}
 
window.onload = function() {
  setInterval (blim, 1000);
  setInterval (blim2, 2000);
}

@whiteapps · 13.02.2017, 20:17

crypton_ua, покажите как вы подключали js

@8Observer8 · 13.02.2017, 20:18

Сообщение от crypton_ua

перенёс код с внешнего файла в сам html-файл и всё заработало, но почему так..?

Без кода невозможно точно ответить. Самое простое - это создать архив примера, чтобы можно было быстренько скачать, запустить, увидеть проблему и исправить. Прикрепите к сообщению минимальный пример в архиве, который демонстрирует проблему.

@crypton_ua · 13.02.2017, 20:54 **[ТС]**

Balanaar, формирование DOM дерева? Это как понимать? И почему в самом html-файле работает, а во внешнем нет? Попробую ваш пример обязательно.

whiteapps, просто, через src, как и css

Я точно помню что с цветом все работало сперва (во внешнем файле), а первый пример кода с фоткой просто был неверно написан. Но видать я что-то перед исправлением дописал и всё перестало работать, даже с цветом) пока не перенес все в один файл. Но я из внешнего уже весь код удалял и оставлял только данную функцию и ничего

@Balanaar · 13.02.2017, 21:13

Про DOM вам почитать не помешало бы...
Если вкратце и по сути, то вы наверняка подключаете свой js-файл где-то вначале страницы. Когда браузер натыкается на <script>, он тут же берёт и исполняет этот скрипт. А если браузер ещё не успел дойти до разметки, то никаких элементов на странице-то в этот момент не будет. Значит document.getElementsByTagName('body') попросту ничего не вернёт.
window.onload - это событие полной загрузки контента и формирования DOM.

@crypton_ua · 14.02.2017, 17:33 **[ТС]**

Balanaar,
Про DOM читал, но такого нигде не писали, и не странно, ведь это тонкость, спасибо за то что ответили по сути, буду знать. Завтра попробую, должно работать
Дальнейшие вопросы также буду оставлять в этой теме. Спасибо всем большое за ответы, не думал что вообще кто-то откликнется

Добавлено через 19 часов 6 минут
Balanaar,
Да, если добавить событие window.onload, то всё работает прекрасно!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	13.02.2017, 13:36
	crypton_ua, Еще проверь относительные пути. Возможно они неправильно записаны. 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	13.02.2017, 18:38
	crypton_ua, покажите весь код и как вы его вызываете 0

@crypton_ua 7 / 7 / 0 Регистрация: 12.02.2017 Сообщений: 315
	13.02.2017, 18:47 [ТС]
	whiteapps, перенёс код с внешнего файла в сам html-файл и всё заработало, но почему так..? обычное тело, а во внешнем всё неиспользуемое в комменте, уже всё исключал... 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	13.02.2017, 20:17
	crypton_ua, покажите как вы подключали js 0

@crypton_ua 7 / 7 / 0 Регистрация: 12.02.2017 Сообщений: 315
	13.02.2017, 20:54 [ТС]
	Balanaar, формирование DOM дерева? Это как понимать? И почему в самом html-файле работает, а во внешнем нет? Попробую ваш пример обязательно. whiteapps, просто, через src, как и css Я точно помню что с цветом все работало сперва (во внешнем файле), а первый пример кода с фоткой просто был неверно написан. Но видать я что-то перед исправлением дописал и всё перестало работать, даже с цветом) пока не перенес все в один файл. Но я из внешнего уже весь код удалял и оставлял только данную функцию и ничего 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	13.02.2017, 21:13
	Про DOM вам почитать не помешало бы... Если вкратце и по сути, то вы наверняка подключаете свой js-файл где-то вначале страницы. Когда браузер натыкается на <script>, он тут же берёт и исполняет этот скрипт. А если браузер ещё не успел дойти до разметки, то никаких элементов на странице-то в этот момент не будет. Значит document.getElementsByTagName('body') попросту ничего не вернёт. window.onload - это событие полной загрузки контента и формирования DOM. 1

@crypton_ua 7 / 7 / 0 Регистрация: 12.02.2017 Сообщений: 315
	14.02.2017, 17:33 [ТС]
	Balanaar, Про DOM читал, но такого нигде не писали, и не странно, ведь это тонкость, спасибо за то что ответили по сути, буду знать. Завтра попробую, должно работать Дальнейшие вопросы также буду оставлять в этой теме. Спасибо всем большое за ответы, не думал что вообще кто-то откликнется Добавлено через 19 часов 6 минут Balanaar, Да, если добавить событие window.onload, то всё работает прекрасно! 0