Понимание потока в javascript

Question

очень новый для JS и просто играющий с примерами, которые я написал из книги. С кодом ниже - почему мои функции не выполняются? Я вызываю их, и синтаксис верен. Если я помещаю document.addEventListener ("DOMContentLoaded", init, false); , тогда будет выполняться функция init(), но не функция test().

Я также путают, где document.addEventListener должны быть размещены, как правило, и именно то, что это означает, что в отношении функции инициализации. Следует ли сначала сначала вызывать функцию init()? Что обычно входит в функцию init()?

Заранее спасибо. Код ниже;

function init() { 
    var panel = document.getElementById("panel"); 
    panel.innerHTML = "Hello World"; 
} 


function test() { 
    var panel = document.getElementById("panel"); 
    panel.innerHTML = "See ya"; 

} 
init(); 
test(); 

Answer 1

Возможно, вы выполняли функции до того, как элементы DOM были загружены. Страница читается сверху вниз. Если функция выполняется до чтения HTML, элемент не будет существовать.

Многие разработчики делают сценарий последним элементом тела, чтобы избежать этого.

Или использовать обработчик OnLoad, как этот

window.onload = function() { 
    init(); 
    test(); 
} 

Функции не должны быть определены в обработчике

EDIT. Также верно, что вы записываете данные в один и тот же элемент, поэтому только вторая функция будет иметь результат, который вы можете увидеть. Вы можете написать отдельный элемент или сделать один ответ и добавить данные вместе.

Answer 2

Похоже, в настоящее время называют методы, но они поднимают ошибки, потому что они вызываются до DOM завершения загрузки. При нормальных обстоятельствах сценарий, подобный этому, будет выполнен, как только браузер достигнет его, поэтому, если это произойдет до загрузки DOM (что обычно происходит), вызовы document.getElementById() не будут выполнены, потому что документ hasn ' t была загружена.

Вы близки с вызовом document.addEventListener ("DOMContentLoaded", первонач, ложь); - это указывает браузеру называть init при загрузке DOM. Однако в этом случае вы вызываете только init, поэтому test() не вызывается.

Я предлагаю удалить ваши встроенные вызовы init(); и тест() ;, а затем добавить следующее:

function onLoaded(){ 
    init(); 
    test(); 
} 

и затем вызвать OnLoaded от вашего слушателя событий:

document.addEventListener ("DOMContentLoaded" , onLoaded , false);