Невозможно установить свойство 'innerHTML' из null

Почему я получаю сообщение об ошибке или Uncaught TypeError: Не удается установить свойство 'innerHTML' из 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>

Ответ 1

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

Ответ 2

Вы можете указать javascript выполнить действие "onload"... Попробуйте это:

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

Ответ 3

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

Почему я получаю сообщение об ошибке или Uncaught TypeError: Невозможно установить свойство 'innerHTML' для null?

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

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

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

Изменение порядка ваших сценариев. Таким образом, ваши сценарии запускаются только после того, как DOM, содержащий элемент hello id, уже загружен. Вы можете добиться этого, просто перемещая тег script после всех элементов 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>

Ответ 4

Просто поместите свой JS в window.onload

window.onload = function() {

        what();

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

    }

Ответ 5

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

Ответ 6

<!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>

Ответ 7

Часть JavaScript должна запускаться после загрузки страницы, поэтому рекомендуется разместить JavaScript Script В конце тега тела

<!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>

Ответ 8

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

<!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>

Ответ 9

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

Ответ 10

<!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>

Ответ 11

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

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

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

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

затем.

Ответ 12

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

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>

Ответ 13

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

Изменить:

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

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

Doing:

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> ';

чтобы он работал.

Ответ 14

Добавить 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:)

Ответ 15

У меня была такая же проблема, и оказалось, что нулевая ошибка была в том, что я не сохранил html, с которым я работал.

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

Я надеюсь, что это было полезно для вас.

Ответ 16

window.onload = function() {
   document.getElementById("weather").innerHTML=weather;
   document.getElementById("temp").innerHTML=temp;
   document.getElementById("wind").innerHTML=wind;
}

window.onload он работает для меня, как обсуждалось выше

Ответ 17

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

Ответ 18

Измените это: -

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

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