Использование document.addEventListener прерывает document.getElementById - PullRequest
0 голосов
/ 04 июня 2018

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

<body onLoad="init();">

В HTML:

document.addEventListener("DOMCONTENTLOADED", init, false);

В файле JavaScript, поэтому мы не смешиваем интерактивный код с кодом содержимого и т. Д.

Но переключаясь на этот метод, мой код ломается, я больше не могу получить доступ к дереву DOM, вот пример:

function Tester(){
    this.value1 = 10;
    this.container = document.getElementById("fred");
    this.list = this.container.childElementCount;       
    this.in_func = function(){
        alert(this.value1+" "+ this.list);
    };//end of this.in_func
}//end of function Tester
function init(){
    var alpha = new Tester();
    alpha.in_func();
}//end of function init

document.addEventListener("DOMCONTENTLOADED", init(), false);
<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Untitled Document</title>

  </head>

  <body><!--onLoad="init();"-->
    <section id="fred">
    <section id="elem1"></section>
    <section id="elem2"></section>
    <section id="elem3"></section>
    <section id="elem4"></section>
    <section id="elem5"></section>  
    </section>
  </body>
</html>

This.container всегда имеет значение null, поэтому childElementCount генерирует ошибку:

"Uncaught TypeError: Cannot read property 'childElementCount 'of null "

Тем не менее, когда я закомментирую прослушиватель событий и использую метод onLoad, он работает, я просто делаю что-то глупое?Я пытался использовать переменную вместо this.list, пытался использовать querySelector вместо getElementById, я пытался «загрузить» вместо «DOMCONTENTLOADED», но, похоже, ничего не работает.

Я знаю, что это будетчто-то действительно простое, но я нигде не могу найти решение в Интернете, возможно, я просто ищу не ту вещь.

Пожалуйста, избавь меня от страданий.

спасибо

Zen

Ответы [ 2 ]

0 голосов
/ 04 июня 2018
document.addEventListener("DOMCONTENTLOADED", init(), false);

Задача 1

Вы вызываете init немедленно и пытаетесь использовать его возвращаемое значение в качестве обработчика события.

Удалите ().

Задача 2

Имена событий чувствительны к регистру.Это DOMContentLoaded не DOMCONTENTLOADED

0 голосов
/ 04 июня 2018

Это правильный способ сделать это:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>

function Tester(){
    this.value1 = 10;
    this.container = document.getElementById("fred");
    this.list = this.container.childElementCount;       
    this.in_func = function(){
        alert(this.value1+" "+ this.list);
    };//end of this.in_func
}//end of function Tester
function init(){
    var alpha = new Tester();
    alpha.in_func();
}//end of function init
  document.addEventListener("DOMContentLoaded", function(event) {
  init();
    console.log("DOM fully loaded and parsed");
  });

// document.addEventListener("DOMContentLoaded", init(), false);
</script>
</head>

<body>
<section id="fred">
<section id="elem1"></section>
<section id="elem2"></section>
<section id="elem3"></section>
<section id="elem4"></section>
<section id="elem5"></section>  
</section>
</body>
</html>

В вашем коде вы вызвали init (), а затем передали его, но вы должны передать его как функцию!document.addEventListener("DOMContentLoaded", init, false); Вот почему

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