4

До сегодняшнего дня ни разу не писал на чистом javascript'e. Но вот приспичило. У сразу же схлопотал ошибку, а что не так - не пойму.

Есть один файл (index.html):

<!DOCTYPE html>
 <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta charset="utf-8" />

  <script src="script.js"></script>
 </head>
 <body>
  <div id="qwer">11</div>
 </body>
</html>

И второй файл (script.js):

(function () { 
document.getElementById("qwer").innerHTML='44';
})();

В общем скрипт не работает, отладчик пишет "uncaught typeerror: cannot set property of null" Что же не так? Ведь элемент с id "qwer" существует.

4 ответа 4

10

В момент исполнения скрипта, документ еще не загрузился до конца.

Первый вариант. Вам нужно сделать аналог jquery метода $(document).ready(). Например, вызывать свой метод внутри window.onload = function(){}; Учтите, что таким образом функцию на событие можно навесить только один раз. Если мало - нужно сделать свой кроссбраузерный аналог jquery метода bind.

Есть второй вариант. Переместить вызов скрипта в самый низ документа.

1
  • Перемещение вниз <body> сработало. Спасибо.
    – Илья
    26 мар 2020 в 0:54
4
window.onload = function(){
document.getElementById("qwer").innerHTML='44';
}
3

Можно поставить в тег script defer)

1
  • 1
    Формально, решение корректное для современных браузеров, однако я бы не рекомендовал его так использовать. На мой взгляд, это свойства-украшалки, которые должны помогать оптимизации, а не влиять на логику исполнения.
    – Qwertiy
    27 янв 2017 в 17:12
1

Просто переместите тег script в самый низ:

<!DOCTYPE html>
 <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta charset="utf-8" />
 </head>
 <body>
  <div id="qwer">11</div>
 </body>
  <script src="script.js"></script>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.