I cannot figure out why i cannot get the property of 'this' in the code below:

var Deferjs = {

init: function(){
    if(document.getElementById('js-currentPage')!=null){
        var file = this.getAttribute('data-page');
        Deferjs.LoadJs(file);
    }
},

LoadJs:function(file){
    alert("ok");
}
}

Deferjs.init();

However if i change this.getAttribute('data-page'); to document.getElementById('js-currentPage').getAttribute it works

Please help me understand the above

thx

I cannot figure out why i cannot get the property of 'this' in the code below:

var Deferjs = {

init: function(){
    if(document.getElementById('js-currentPage')!=null){
        var file = this.getAttribute('data-page');
        Deferjs.LoadJs(file);
    }
},

LoadJs:function(file){
    alert("ok");
}
}

Deferjs.init();

However if i change this.getAttribute('data-page'); to document.getElementById('js-currentPage').getAttribute it works

Please help me understand the above

thx

• javascript

Share Improve this question Follow asked Apr 3, 2015 at 10:51 wasiim_devwasiim_dev 1,15711 gold badge99 silver badges2222 bronze badges 5

• I think this does not contain what you think in the if statement, replacing it with document.getElementById('js-currentPage') should solve your issue – BeNdErR Commented Apr 3, 2015 at 10:55
• this is not referring to document.getElementById('js-currentPage') – ozil Commented Apr 3, 2015 at 10:57
• what do you think this points – semirturgay Commented Apr 3, 2015 at 10:57
• i don't want to duplicate the same code again, that is why i tried with "this" – wasiim_dev Commented Apr 3, 2015 at 10:57
• this should point to document.getElement.ById("js-currentPage") ? – wasiim_dev Commented Apr 3, 2015 at 10:58

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

if you want to reuse document.getElementById('js-currentPage') save it in a variable. you can not refer it with this in your case this points to the container object (DeferJs)

init: function(){
    var elem=document.getElementById('js-currentPage');
    if(elem!=null){
        var file = elem.getAttribute('data-page');
        Deferjs.LoadJs(file);
    }
}

if(document.getElementById('js-currentPage')!=null){
        var file = this.getAttribute('data-page');

Here this will refer to Deferjs. Instead you must store the reference to the DOM to a variable if you want to access it else where.

   var ele = document.getElementById('js-currentPage');
   if(ele!=null){
            var file = ele.getAttribute('data-page');

your init function resides in Deferjs, thus, when you use "this", it's referring to Deferjs. Deferjs does not have a function named getAttribute. you need to use

document.getElementById('js-currentPage').getAttribute(...)

DOM actually provides a set of API to access HTML elements, and this pointer points to the scope of the object, which can only access the attributes class, ID, style, etc.

In the scope of the object, that is, you can access through the object attributes (this.data-message). However, there is no getAttribute() method in the scope of the object, so you cannot use this.getAttribute().