Невозможно установить для свойства innerHTML значение null

Question 1

Почему я получаю сообщение об ошибке или Uncaught TypeError: Cannot set property 'innerHTML' of null? Я думал, что понимаю innerHTML, и раньше он работал.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

</head>

<body>
<div id="hello"></div>
</body>
</html>

Question 2

Вы должны поместить hellodiv перед скриптом, чтобы он существовал при загрузке скрипта.

Question 3

Давайте сначала попытаемся понять первопричину того, почему это происходит.

Почему я получаю сообщение об ошибке или Uncaught TypeError: Cannot set property 'innerHTML' of null?

Браузер всегда загружает всю HTML-модель DOM сверху вниз. Любой код JavaScript, написанный внутри scriptтегов (присутствующих в headразделе вашего HTML-файла), выполняется механизмом рендеринга браузера даже до того, как будет загружена вся ваша DOM (различные теги элементов HTML, присутствующие в теге body). Сценарии, представленные в headтеге, пытаются получить доступ к элементу, имеющему идентификатор, helloеще до того, как он был фактически отображен в DOM. Очевидно, что JavaScript не смог увидеть элемент, и, следовательно, вы увидите ошибку нулевой ссылки.

Как заставить его работать как раньше?

Вы хотите, чтобы сообщение «привет» отображалось на странице, как только пользователь заходит на вашу страницу в первый раз. Поэтому вам нужно подключить свой код в тот момент, когда вы полностью уверены в том, что DOM полностью загружен и helloэлемент id доступен / доступен. Это возможно двумя способами:

Измените порядок ваших скриптов : таким образом ваши скрипты запускаются только после того, как DOM, содержащий ваш helloэлемент id, уже загружен. Вы можете добиться этого, просто переместив тег скрипта после всех элементов DOM, то есть внизу, где bodyтег заканчивается. Поскольку рендеринг происходит сверху вниз, ваши скрипты выполняются в конце, и вы не сталкиваетесь с ошибкой.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div id="hello"></div>
    
    <script type ="text/javascript">
        what();
        function what(){
            document.getElementById('hello').innerHTML = 'hi';
        };
    </script>
    </body>
    </html>

Развернуть фрагмент

Использовать перехват событий : механизм визуализации браузера предоставляет перехватчик событий на основе window.onloadсобытия, который дает вам подсказку, что браузер завершил загрузку DOM. Поэтому к тому времени, когда это событие запускается, вы можете быть уверены, что ваш элемент с helloидентификатором, уже загруженным в DOM, и любой JavaScript, запущенный после этого, который пытается получить доступ к этому элементу, не потерпит неудачу. Итак, вы делаете что-то вроде фрагмента кода ниже. Обратите внимание, что в этом случае ваш скрипт работает, даже если он находится в верхней части вашего HTML-документа внутри headтега.

<!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type ="text/javascript">
            window.onload = function() {
            what();
            function what(){
                document.getElementById('hello').innerHTML = 'hi';
            };
        }
        </script>
        </head>
        
        <body>
        <div id="hello"></div>
        </body>
        </html>

Развернуть фрагмент

Question 4

Вы можете указать javascript выполнить действие «загрузка» ... Попробуйте следующее:

<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>

Question 5

Просто вставьте свой JS window.onload

window.onload = function() {

        what();

        function what() {
            document.getElementById('hello').innerHTML = 'hi';
        };

    }

Question 6

Часть JavaScript должна запускаться после загрузки страницы, поэтому рекомендуется размещать сценарий JavaScript в конце тега body.

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

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>  
</body>
</html>

Развернуть фрагмент

Question 7

Javascript выглядит неплохо. Попробуйте запустить его после загрузки div. Попробуйте запустить только тогда, когда документ будет готов. $(document).readyв jquery.

Question 8

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

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = '<p>hi</p>';
    };
</script>  
</body>
</html>

Развернуть фрагмент

Question 9

Вот мой фрагмент, попробуйте. Я надеюсь, что это будет полезно для вас.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
  
<div id="hello"></div>
  
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>

Развернуть фрагмент

Question 10

Вы можете попробовать использовать метод setTimeout, чтобы убедиться, что ваш html загружается первым.

Question 11

Основная причина: HTML на странице должен быть загружен до кода javascript . Разрешение 2 способами:

1) Разрешить загрузку HTML до кода js.

<script type ="text/javascript">
    window.onload = function what(){
        document.getElementById('hello').innerHTML = 'hi';
    }
</script>

//or set time out like this:
<script type ="text/javascript">
    setTimeout(function(){
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
    }, 50);
    //NOTE: 50 is milisecond.
</script>

2) Переместите код js под код HTML

<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

Question 12

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>

Развернуть фрагмент

Question 13

У меня была такая же проблема, и оказалось, что ошибка null возникла из-за того, что я не сохранил HTML-код, с которым работал.

Если упомянутый элемент не был сохранен после загрузки страницы, он имеет значение «null», потому что документ не содержит его во время загрузки. Использование window.onload также помогает при отладке.

Надеюсь, это было вам полезно.

Question 14

Эта ошибка может появиться даже в том случае, если вы загрузите свой скрипт после завершения рендеринга HTML. В этом примере ваш код

<div id="hello"></div>

не имеет значения внутри div. Таким образом возникает ошибка, потому что внутри нет значения, которое можно было бы изменить. Это должно было быть

<div id="hello">Some random text to change</div>

тогда.

Question 15

Добавить jquery в < head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Используйте $ document.ready () : код может быть < head>в отдельном файле, например main.js, или в отдельном файле.

1) используя js в том же файле (добавьте это в < head>):

<script>
$( document ).ready(function() {
function what(){
    document.getElementById('hello').innerHTML = 'hi';
};
});
</script>

2) используя другой файл, например main.js (добавьте его в < head>):

<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>

и добавляем код в файл main.js :)

Question 16

Вам нужно переодеться divв p. Технически innerHTML означает, что он находится внутри <??? id=""></???>детали.

Изменить:

<div id="hello"></div>

в

<p id="hello"></p>

Делаю:

document.getElementById('hello').innerHTML = 'hi';

получится

<div id="hello"></div> into this <div id="hello">hi</div>

что на самом деле не имеет смысла.

Также можно попробовать изменить:

document.getElementById('hello').innerHTML = 'hi';

в это

document.getElementById('hello').innerHTML='<p> hi </p> ';

заставить его работать.

Question 17

Ошибка самоочевидна, это не получение тега HTML, в котором вы хотите установить данные. Поэтому сделайте тег доступным для JS, только тогда вы можете установить для этого данные.

Question 18

Без сомнения, большинство ответов здесь правильные, но вы также можете сделать это:

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});

Question 19

Существуют разные возможные причины, которые обсуждались, просто хотелось бы добавить это для кого-то, у кого может быть такая же проблема, как у меня.

В моем случае у меня отсутствовал закрытый div, как показано ниже

   <!DOCTYPE HTML>
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   </head>
   <body>
   <div> //I am an open div
    <div id="hello"></div>
   <script type ="text/javascript">
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
   </script>
   </body>
   </html>

Отсутствие закрытого div может привести к дезорганизации перехода от дочернего к родительскому или родительского к дочернему, что приводит к ошибке при попытке доступа к элементу в DOM.

Question 20

Позвольте DOM загрузиться. Чтобы что-то сделать в DOM, вы должны сначала его загрузить. В вашем случае вы должны <div>сначала загрузить тег. тогда вам есть что доработать. если вы сначала загрузите js, тогда эта функция ищет, HTMLчтобы вы выполнили то, что вы просили сделать, но когда в это время вы HTMLзагружаете, и ваша функция не может найти файл HTML. Таким образом, вы можете разместить сценарий внизу страницы. внутри <body>тега, функция может получить доступ к <div>объекту, потому что DOM уже загружен, когда вы нажимаете скрипт.