Тема: Де розміщувати скрипт

Я розмістив скрипт (JS) у тегу "head" і якщо я намагаюся взяти елемент по ID я отримую помилку (що елемент є нулем) за допомогою функції getElementById, зрозуміло чому, тому що сторінка не завантажилася, але я не знаю як цього уникнути, наприклад якщо зробити функцію події onload це не допоможе

        document.onload = function()
        {
            document.getElementById("put_new").addEventListener("submit", function(event){
                event.preventDefault();
                main();
            });
        }

помилка пропадає, але вже коли виконується подія submit нічого не відбувається

якщо помістити скрипт в тег body то помилка зникає, але я не хочу розривати код на куски.

Можна зробити так що код 

document.getElementById("put_new").addEventListener("submit", function(event){
                event.preventDefault();
                main();
            });

спрацював після завантаження сторінки, притому що скрипт був у тегу "head" ? Чи прийдеться переміщати його в body ?

Подякували: 221VOLT1

2

Re: Де розміщувати скрипт

Я зробив скрипт в окремому файлі і розмістив підключення в кінці тегу body, але запитання ще актуальне

3

Re: Де розміщувати скрипт

ну дивись, бравзер працює як, він парсить HTML DOM структуру і все що стосується скриптів він одразу ж виконує, і виходить так що ваш скрипт шукає елемент, який насправді ще не завантажився, тому тут виходів два, до яких ви вже дійшли.
I краще всього закидувати скрипти, які працюються із DOM структурою, в КІНЕЦЬ body, а не на початку в head чи десь в середині.

за таким принципом наприклад працюються всякі фреймворки, і це нормальна практикаю

(function(){
  console.log("called anonymously");
})()
Подякували: Betterthanyou, 221VOLT2

4

Re: Де розміщувати скрипт

а якщо вже подобається коли всі скрипти в head
то застосуй даний механізм

$(document).ready(function() {
      alert("document ready occurred!");
});

aбо

window.onload = function() {
   alert("window ready occurred!");
};
(function(){
  console.log("called anonymously");
})()
Подякували: Betterthanyou, 221VOLT2

5

Re: Де розміщувати скрипт

Це допомогло

window.onload = function() {
   alert("window ready occurred!");
};

Дякую
Я що думав що треба писати document.onload, бо якби document за DOM відповідає
Треба буде мені про ці (window і document) об'єкти почитати

Подякували: mike, 221VOLT2

6 Востаннє редагувалося 221VOLT (14.12.2016 01:37:47)

Re: Де розміщувати скрипт

Betterthanyou написав:

Я розмістив скрипт (JS) у тегу "head" і якщо я намагаюся взяти елемент по ID я отримую помилку (що елемент є нулем) за допомогою функції getElementById, зрозуміло чому, тому що сторінка не завантажилася, але я не знаю як цього уникнути, наприклад якщо зробити функцію події onload це не допоможе

        document.onload = function()
        {
            document.getElementById("put_new").addEventListener("submit", function(event){
                event.preventDefault();
                main();
            });
        }

помилка пропадає, але вже коли виконується подія submit нічого не відбувається

якщо помістити скрипт в тег body то помилка зникає, але я не хочу розривати код на куски.

Можна зробити так що код 

document.getElementById("put_new").addEventListener("submit", function(event){
                event.preventDefault();
                main();
            });

спрацював після завантаження сторінки, притому що скрипт був у тегу "head" ? Чи прийдеться переміщати його в body ?

потрібно

window.onload

а не

document.onload

крім того, існують способи запустити функцію після загрузки власне окремого скрипта
https://learn.javascript.ru/onload-ondomcontentloaded
https://learn.javascript.ru/onload-onerror

var script = document.createElement('script');
script.src = "../yourscript.js"
document.body.appendChild(script);

script.onload = function() {
    alert(777);
  }
https://blog.clever-games.win/
Це ще не кінець. Це навіть не початок кінця. Але, можливо, це кінець початку.
Зростання мудрості можна точно вимірювати ступенем зменшення злоби.