«innerHTML» зависит от обработчиков событий?

первый:«innerHTML» зависит от обработчиков событий?

function change(){ 
    document.getElementById("clr").style.backgroundColor="red"; 
    document.getElementById("test1").innerHTML="hwllo world"; 
}

второй:

document.getElementById("test1").innerHTML="hwllo world";

Первый из них работает нормально. Но второй не работает, когда файл загружен.

источник

2013-05-29 Santhi Kabir

Я предполагаю, что второй пример работает до DOM готов. Поместите его в готовый обработчик событий или переместите скрипт в конец тела, чтобы элемент, к которому он ссылается, существует к моменту анализа скрипта. –

Какой браузер вы используете? Где вы разместили код JavaScript? Просьба привести пример. – David

во втором случае ваш код не был выполнен. поэтому вам нужно включить функцию автозапуска. Проверьте мой ответ. – Sudarshan

Как сказал в своем комментарии Джеймс Аллардис, код, вероятно, выполнен до того, как DOM готов. Тогда ваш код мог бы не работать, поскольку элемент может отсутствовать. Это известная проблема, но есть также известное решение. Наиболее часто используемым решением является, вероятно, использование jQuery, который имеет простой способ разрешить выполнение функции только после того, как документ будет готов. Для того, чтобы использовать этот метод, сначала нужно включить JQuery в качестве справочного сценария, а затем изменить код следующим образом:

$(document).ready(function() { 
    document.getElementById("clr").style.backgroundColor="red"; 
    document.getElementById("test1").innerHTML="hwllo world"; 
});

Теперь, если вы используете JQuery в любом случае, вы можете также переписать код, чтобы использовать JQuery селекторы и сделать это немного более компактно:

$(document).ready(function() { 
    $("#clr").css("backgroundColor", "red"); 
    $("#test1").html("hwllo world"); 
});

Оба фрагмента кода функционально эквивалентны.

источник

2013-05-29 07:09:03

Обработка Javascript и HTML выполняется в последовательности, в которой они находятся в файле. Поэтому, если вы выполняете кусок JS до визуализации HTML-элемента, JS-код не будет работать.

Это провал:

<script> 
    document.getElementById("test1").innerHTML="hwllo world"; 
</script> 
<div id="test1"></div>

Это будет работать, как ожидалось:

<div id="test1"></div> 
<script> 
    document.getElementById("test1").innerHTML="hwllo world"; 
</script>

В качестве альтернативы вы можете использовать различные OnLoad и Dóm готовые события, чтобы сделать убедитесь, что ваш скрипт выполняется после того, как весь HTML был разгромлен :

<script> 
    window.onload = function(){ 
    document.getElementById("test1").innerHTML="hwllo world"; 
    } 
</script> 
<div id="test1"></div>

источник

2013-05-29 07:11:03 slebetman

И какая ошибка в консоли? Может быть, вы пытаетесь установить innerHTML не существующего узла? Если вы хотите, чтобы манипулировать с дивами, вы должны сделать это после загрузки страницы, так обычно называют это как OnLoad событие тела:

<script> 
function init() { 
    document.getElementById("test1").innerHTML="hello world"; 
} 
</script> 

<body onload="init();"> 
<div id="test1"></div> 
...

источник

2013-05-29 07:12:04

«innerHTML» зависит от обработчиков событий?

ответ

Смежные вопросы