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

97

Почему я получаю сообщение об ошибке или 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>
javascript onload innerhtml Джошуа В.
источник

Ответы:

170

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

Эрик Годар
источник
18
Если вы используете window.onload = function name () {}, не имеет значения, находится ли div до или после.
Colyn1337
1
Хрустящий раствор. Но я все еще получаю сообщение об ошибке. In chrome / fedora 25 / apache
Саху В Кумар
48

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

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

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

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

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

  1. Измените порядок ваших скриптов : таким образом ваши скрипты запускаются только после того, как 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>
Развернуть фрагмент

  1. Использовать перехват событий : механизм визуализации браузера предоставляет перехватчик событий на основе 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>
Развернуть фрагмент

RBT
источник
Хороший материал, но я бы добавил, что не думаю, что функция, которая выполняет document.getElementById (..). InnerHTML. нужно поместить в onload. Поскольку он может загружаться до загрузки DOM, и ошибки нет. Только его вызов должен быть. jsfiddle.net/fbz6wLpd/8
barlop
40

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

<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
Колин1337
источник
11

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

window.onload = function() {

        what();

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

    }
РИЯЙ ХАН
источник
7

Часть 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>
Развернуть фрагмент

user5323957
источник
2
Не могли бы вы перестать использовать заглавные буквы в каждом вводимом слове?
VortexYT
6

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

Джей Ти Нолан
источник
1
также тип атрибута в тегах скрипта устарел.
JT Nolan
2
и импорт jquery для решения этой проблемы является излишним, если вы не планируете использовать его для этого проекта здесь. window.onloadможет быть достаточно, но есть и другие события. Ссылка на MDN на window: developer.mozilla.org/en-US/docs/Web/API/Window
Sgnl
5 

<!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>
Развернуть фрагмент

user6175882
источник
Ваш ответ правильный, но могу ли я попросить вас добавить некоторый контекст вокруг вашего исходного кода. Ответы только на коде трудно понять. Если вы добавите больше информации в свой пост, это поможет как спрашивающему, так и будущим читателям.
RBT
3

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

<!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>
Развернуть фрагмент


источник
3

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

Эдди
источник
3

Основная причина: 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>
Pines Tran
источник
1 

<!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>
Развернуть фрагмент

user2114253
источник
проблема в том, что кулак html div загружен .. чем вызов функции сценария java, теперь он работает ...
user2114253
1

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

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

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

чума
источник
1

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

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

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

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

тогда.

Марко Слиепчевич
источник
0

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

abe312
источник
0

Вам нужно переодеться 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> ';

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

user6175882
источник
0

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

Шубхам
источник
0

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

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});
Шрей Трипати
источник
0

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

В моем случае у меня отсутствовал закрытый 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.

Proxybee
источник
Пожалуйста, ответьте в соответствии с примером OP.
mishsx
@mishsx причина моего ответа: у меня была точно такая же ошибка, и когда я искал, я видел все исправления, но не исправление в моем собственном случае, задав тот же вопрос будет дублироваться, я чувствовал, что кто-то другой может быть в точном такая же ситуация, и я решил опубликовать свою собственную ошибку и исправить в качестве ответа ... как вы можете видеть, это четко указано в ответе, поэтому это будет полезно для тех, кто находится в той же ситуации, и все же ясно для других, что это не Это исправление ошибки в вопросе. Если это не нормально, любезный совет, как мне сделать альтернативную ошибку и исправить известную без дублирования
Proxybee
0

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

HeshanHH
источник