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

Question

[Михаил]

Есть код на jsfiddle.
Есть точно такой же на CodePen.
На jsfiddle он НЕ работает.
На CodePen - он работает.
кто что скажет ?

https://jsfiddle.net/mk3mk/xc4n3rse/21/
https://codepen.io/mk3mk/pen/jXgeaO

почему - не пойму...

Answer 1

[Dymok]

На codepen весь JS код выполняется после загрузки DOM. На JSFiddle - нет. Нужно писать так -

document.addEventListener("DOMContentLoaded", function(event) {
var button = document.getElementById('button');
var qq = document.getElementById('qq');

button.onclick = function (){

	qq.style.background = 'green';
  
};
});

Comments

[iBird Rose]

можно просто выбрать вид загрузки

[Dymok]

iBird Rose, как вариант. Не знал.

Answer 2

[Николай Шабалин]

Dymok всё правильно написал.

В jsfiddle пользовательский скрипт подключается в HEAD секции, а это значит, что Вы ищите кнопки до наступления события DOMContentLoaded. Ваших кнопок попросто ещё не существует.

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

Answer 3

[Magrian]

страница не успевает загружаться, оберните в

window.onload = function(){ 
 //ваш код
}