Невозможно найти элемент из скрипта - PullRequest
Новая
       47

Невозможно найти элемент из скрипта

1 голос
/ 27 апреля 2010

Я пытаюсь получить элемент DOM из JavaScript. Даже если идентификатор верен, getElementId не может его найти; Я получаю

TypeError: Невозможно прочитать свойство 'innerHTML' с нулевым значением

в Chrome или

TypeError: x равен нулю

в Firefox, используя только простой код ниже. Почему это? 

<!DOCTYPE html>

<html>
    <head>
        <script>
            var x = document.getElementById("myHeader");
            alert(x.innerHTML);
        </script>
    </head>
    <body>
        <h1 id="myHeader">Click me!</h1>
    </body>
</html>

Ответы [ 7 ]

12 голосов
/ 27 апреля 2010

Поскольку тег <script> находится внутри тега <head>, он запускается до разбора тела, поэтому элемент myHeader еще не существует.

Вам нужно поставить блок <script> в конце тега <body>.

3 голосов
/ 27 апреля 2010

Или оставьте его в <head>, но оберните его в функцию и вызовите, когда <body> загружен 

<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/tdt/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
    function init(){
      var x=document.getElementById("myHeader");
      alert(x.innerHTML);  
    }

//-->
</script>
</head>
<body onload="init();">

<h1 id="myHeader">Click me!</h1>

</body>
</html>
2 голосов
/ 27 апреля 2010

Проблема в том, что в момент вызова функции getElementById DOM еще не завершил загрузку, поэтому элемент myHeader не существует. Вам нужно выполнить этот код после завершения загрузки DOM. Например: 

window.onload = function() {
    var x = document.getElementById("myHeader");
    alert(x.innerHTML);
};

Если вы используете популярную jQuery инфраструктуру, ваш код может выглядеть следующим образом: 

$(function() {
    var x = $("#myHeader");
    alert(x.html());
});

и он будет работать с большинством браузеров.

Другой вариант - поставить script непосредственно перед закрытием тега body: 

<h1 id="myHeader">Click me!</h1>

<script type="text/javascript">
<!--
    var x=document.getElementById("myHeader");
    alert(x.innerHTML);
//-->
</script>
</body>

Поскольку DOM загружается последовательно, как только ваш скрипт начинает выполнение, элемент myHeader уже будет загружен.

1 голос
/ 27 апреля 2010

В этом случае переместите ваш скрипт вниз: 

<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/tdt/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>    
<h1 id="myHeader">Click me!</h1>    
<script type="text/javascript">
<!--
    var x=document.getElementById("myHeader");
    alert(x.innerHTML);
//-->
</script>
</body>
</html>

В настоящее время выполняется до того, как элемент существует , поэтому он выдает ошибку, потому что ничего не находит, а x не определено. Выполнение сценария в конце тела решит эту проблему.

0 голосов
/ 27 апреля 2010

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

Вы можете поместить тег <script> в конце документа, но лучше отложить выполнение, поместив свое предупреждение в обработчик onload окна.

Если вы заинтересованы в использовании фреймворка, такого как jQuery, он предоставляет аналогичное событие ready.

0 голосов
/ 27 апреля 2010

как, по вашему мнению, браузер узнает, как вызвать ваш код после нажатия на заголовок? вам нужно извлечь предупреждение (что-то) в функцию, например, 

function hello(){
    alert("hello world");
}

и к элементу h1 добавьте атрибут onClick = "hello ()" .

0 голосов
/ 27 апреля 2010

Ваш скрипт работает до загрузки вашего HTML.Переместите сценарий вниз или отложите выполнение до тех пор, пока страница не загрузится.

Кроме того, вам никогда не нужно использовать <!-- ... ---->, чтобы скрыть свой сценарий.Там нет ничего, чтобы скрыть это от

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...