Не работает js код (не видит элемента)?

Question

[web-quest3]

почему если разнести это по файлам

<input id="elem" type="button" value="Нажми меня" />
<script>
  elem.onclick = function() {
    alert( 'Спасибо' );
  };
</script>

и джс подключить как положено в хеаде код не отработает?
Даже если использовать
событие лоад или контентреади

Comments

[iBird Rose]

а с чего код должен понять что elem это id?

[web-quest3]

iBird Rose потому что так есть. Этот код рабочий но в случае переноса не работает...

[Pavel]

web-quest3: какого переноса? это не рабочий код, у вас нету определения переменной elem. ниже вам уже ответили, как её задать.

[web-quest3]

Pavel серезно вы проверяли этот код? поучите ка js...https://jsfiddle.net/91jkun32/

[Евгений]

web-quest3: попробуйте вывести до клика console.log(elem) и вы удивитесь. Вангую в консоли будет "undefined"

[web-quest3]

Евгений просветили, я не спрашиваю что будет я спрашиваю как исправить?

[Ильдар Гизетдинов]

Евгений: https://jsfiddle.net/pcwcvtLw/

[Алексей Ярков]

Pavel: а оно и не нужно. Если есть элемент с id="elem", то переменная сама создается.

Answer 1

[Ильдар Гизетдинов]

Вы подключаете скрипт в head, а элемент находится дальше по дереву, во время выполнения он еще просто напросто не успел определится, а вы к нему уже обращаетесь.

В данном случае, решение - это переместить подключение скрипта в конец.

Comments

[web-quest3]

Ильдар Гизетдинов я это понимаю но в джквери есть такой метод документ рейди, я использовал его аналоги на чистом джс, но тем не менее не отрабатывает, а я хочу понять тонкости языка, поэтому мне важный заставить этот способ работать )

[Ильдар Гизетдинов]

web-quest3: Я не могу вам дать точный ответ, но, просто подумайте, если браузер во время обработки, создает переменные, может он их выполняет в том же порядке, как и обычные скрипты? то есть сверху вниз? То есть условно он её определит, но только в порядке очереди. Мне кажется это наиболее вероятный вариант

[web-quest3]

Ильдар Гизетдинов а кроме как в конец не покатит (виндов онлоад и прочие события )? ведь в jq прокатывает

[Ильдар Гизетдинов]

web-quest3: сейчас не поленился, развернул пример на фиддле, а в чем собственно говоря проблема, у меня оно в ready отловило https://jsfiddle.net/pcwcvtLw/3/

[web-quest3]

Ильдар Гизетдинов а теперь без jq

[Ильдар Гизетдинов]

web-quest3: https://jsfiddle.net/pcwcvtLw/4/ а самому проверить?

[web-quest3]

Ильдар Гизетдинов я проверял сейчас покажу через какой способ DOMContentLoaded или это не то?

[web-quest3]

https://jsfiddle.net/pcwcvtLw/5/ Ильдар Гизетдинов странно то что такой код не отрабатывал

[web-quest3]

https://jsfiddle.net/pcwcvtLw/6/ Ильдар Гизетдинов b nfrjq nj;t f[f[)

Answer 2

[Евгений]

document.getElementById()

Comments

[web-quest3]

Евгений мне интересен именно этот нюанс, код рабочий но только если не переносить код почему так?

[Алексей Ярков]

Евгений Не обязательно. Если есть элемент с id="elem", то переменная сама создается.

Answer 3

[Andrey Kabushev]

Сам над тем же вопросом сидел. Вот, что вышло:

document.addEventListener("DOMContentLoaded", function() {
  let butt = document.getElementById("butt");
  butt.addEventListener("click", myFunc);
});

function myFunc() {
  alert("Done!");
}

Фишка в том, чтобы дождаться загрузки страницы и на это событие повесить колбэк, в виде навешивания addEventListener (только сначала сделать getElementById).