Почему не работает скрипт?

Question

[Артём]

Если эти две строчки с getElementByID написать в html файле, и потом в консоли написать thu, то у меня выводится див. Если я тоже самое пишу в файле скрипта, то пишет что thu is not defined. При этом если в подключенном файле скрипта написать alert, то он работает и выводит, значит скрипт подключен.. Почему тогда переменные is not defined. Причем такое бывает иногда, а иногда все нормально работает.

window.onload = function () {
let thu = document.getElementById('thumbs');
var thud = document.getElementById('lol');
}

Answer 1

[Stalker_RED]

Замыкания, область видимости

Comments

[Артём]

Так, я понял, я дурак:D Я знаю что переменные видны в только в функции, а снаружи нет;D Просто я обычно давал именам переменных такие же имена, как и id. А т.к. id выводится, даже если не получать их через getElement, то они и выводились, и я думал, что для функции window.onload законы области видимости не писаны:D
Спасибо.

[Stalker_RED]

Артём, вообще писать вот так вот window.onload = function ... - это сильно неправильно.
Если где-то будет другая запись window.onload = function то она перезапишет первую, и первая не сработает.

Лучше использовать addEventListener, причем не на событие load а на DOMContentLoaded

window.addEventListener('DOMContentLoaded', function(){
    // ...
})

Разница описана здесь: https://learn.javascript.ru/onload-ondomcontentloaded

[Артём]

Stalker_RED, спасибо.

Answer 2

[ixon]

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

var thud;
let thu;
window.onload = function () {
thu = document.getElementById('thumbs');
thud = document.getElementById('lol');
}

Answer 3

[Александр]

Потому что это объект. Попробуй thu.innerHTML

Comments

[Andrew]

так бы он был defined {}, дело в "let", его область видимость - этот блок.

[Stalker_RED]

Andrew, там не просто блок, а функция. Снаружи даже var не видно.

[Александр]

Да.... но переменные вроде определены вне функции...

[Александр]

Хотя да.... внутри функции thu не будет ни чего присваиваться... те она останется пустой