2016-01-15 2 views
0

Я играю с Javascript, чтобы вернуться в качание вещей для своего второго веб-класса, который недавно начал, и я столкнулся с проблемой получения getElementById и innerHTML для работы.getElementById/InnerHTML Функция не работает

В принципе, я хочу, чтобы заполнить пустое h1 с именем Animal

function favAnimal() 
 
     { 
 
     document.getElementById("animal").innerHTML="cat" 
 
     }
<h1 id="animal" onload="favAnimal()">Favourite Animal Placeholder</h1>

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

Вся помощь приветствуется и благодарит заранее!

+0

Если я не ошибаюсь 'h1' Безразлично» t имеет событие 'onload'. – joaumg

+0

попробуйте поместить 'onload =" favAnimal() "' в тег 'body'. Вы также можете использовать 'innerText' вместо' innerHTML', поскольку вы не меняете HTML. – Quantumplate

ответ

3

У метки <h1> нет обработчика события onload, поэтому ваша функция никогда не вызывается.

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

Если вы хотите, чтобы ваш код, который будет срабатывать при загрузке документа, вы можете использовать один из них:

window.addEventListener("load", favAnimal);  // all page resources loaded 
document.addEventListener("DOMContentLoaded", favAnimal); // HTML done parsing 

Если вы просто хотите, чтобы ваш скрипт будет выполняться сразу же после того, как ваш <h1> тега был загружен, вы можете просто разместить вызов скрипта сразу после тега. Страница обрабатывается/выполняется для того, чтобы любой скрипт всегда будет иметь возможность ссылаться на HTML элементы, которые идут перед ним в документе:

<h1 id="animal">Favourite Animal Placeholder</h1> 
<script>favAnimal()</script> 

Вот некоторые из вещей, которые я знаю, что есть load событие:

window 
<img> 
<body> 
<iframe> 
<link> 
<script> 
<embed> 
<object> 
<video> 
<audio> 
XMLHttpRequest 

И, почти любой другой тег HTML, который имеет src или href атрибут, кроме <a>. Идея состоит в том, что если тег загружает какой-то внешний ресурс, то есть событие load, чтобы узнать, когда будет загружен этот внешний ресурс. Если тег не загружает внешний ресурс, вероятно, для него нет события load.

+0

Необработанная спецификация для HTML5 [здесь] (https://www.w3.org/TR/html5/), но такого рода вещи не так просто узнать. Обычно я использую MDN в качестве основного источника ссылки или HTML/Javascript, но эту конкретную проблему найти не так просто. – jfriend00

-2

Что здесь происходит, что файл сценария ur, выполненный раньше, чем html-рендеринг. Таким образом, он не может найти элемент, поскольку он пока не отображается. Браузер предоставляет такие события, как onload, unload. Здесь вам нужно загрузить onload `Document.addEventListener (« DOMContentLoaded », init);

Функция инициализации() {// ур код } `

2

load событие только отправляется на ресурсы, такие как документ, изображения, ...

Если вы хотите запустить какой-то сценарий, только после того, как элемент был проанализирован, просто добавьте script элемент после него:

<script> 
 
    function favAnimal() { 
 
    document.getElementById("animal").innerHTML = "cat"; 
 
    } 
 
</script> 
 
<h1 id="animal">Favourite Animal Placeholder</h1> 
 
<script>favAnimal()</script>