2016-12-22 3 views
2

Итак, я пытаюсь создать функцию, которая может собирать все данные в this.courses в тело таблицы с моим свойством FetchAll, но по какой-то причине я продолжаю получать эту ошибку в своей функции FetchAll в window.onload:Проблемы с областью Window.onload

не может установить innerHTML неопределенной

Однако, когда я не использую window.onload и место app.FetchAll() вне сферы приложения, запустив сценарий в нижней части тела, у меня есть полный до this.el.

Что здесь происходит?

var app = new function() { 
    // code 

    //we want to get each course by its id 
    this.el = document.getElementById('courses'); 


    //this is all of our data in an array. 
    this.courses=['Biology', 'Chemistry','History','English','Spanish','Geography']; 

    //now we want to make the count function 

    this.Count = function (data) { 
    //the data is the input for waht we wanto count 
    var el = document.getElementById('courses'); 
    var name = 'courses'; 

    if (data) { 
     if (data > 1) { 
     // sets the name var to courses 
     name = 'courses'; 
     } 
     el.innerHTML = data + '' + name; 
    } else { 
     el.innerHTML = 'No' + name; 
    } 
    } 

    this.FetchAll = function() { 
    var data = ''; // this is what we are going to put the html into 
    if (this.courses.length > 0) { 
     for (var i = 0; i < this.courses.length; i++) { 
      data += '<tr>'; 
      data += '<td>' + this.courses[i] + '</td>'; 
      data += '</tr>'; 
     } 
    } 
    this.Count(this.courses.length); 
    return this.el.innerHTML = data; 

    }; 

    this.Add = function (data) { 

    alert("add something") 
    } 

} 

window.onload = function() { 
    app.FetchAll(); 

} 
+0

Вы уверены, что это undefined вместо null? Это звучит так, будто вы не вызываете свой метод с нужным «этим», но в коде, который вы опубликовали, он должен работать. – Oriol

ответ

3

Это не сфера проблема, это просто вопрос о том, когда вещи случаются, как браузер интерпретирует HTML-документ. Код инициализации, создающий объект app, выполняется до того, как браузер построит DOM. Из-за этого звонок .getElementById() возвращает null.

Он работает, когда вы перемещаете код до конца <body>, потому что, когда код запускается в этом случае, DOM создается (в основном).

Размещение вызова FetchAll() может быть в обработчике нагрузки или нет, если ваш код находится внизу. Если вы положили все код (включая конструкцию объекта app) в обработчик нагрузки, который также будет работать.

+0

Но вопрос говорит, что он не определен, а не нуль – Oriol

+0

@ Ориол хорошо, что это правда. хмм – Pointy

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