Why getElementById returns null when called inside a Class?

Question

I have a class like below and I want to pass an element for further customization. The class should be responsible of setting up the size of the box and adds elements to it. I having hard time applying the necessary styles needed to element.

class BoxBuilder {
    constructor(element, items) {
        this.items = items;
        this.elm   = document.getElementById(element);
    }
    setSize(h, w) {
        console.log(this.elm); // returns null
        this.elm.style.width = w;
        this.elm.style.height = h;
        return this;
    }
}

And with jQuery :

class BoxBuilder {
    constructor(element, items) {
        this.items = items;
        this.elm   = $(element);
    }
    setSize(h, w) {
        console.log(this.elm); // returns [context: document, selector: "#box-container"]
        this.elm.style.width = w;
        this.elm.style.height = h;
        return this;
    }
}


// here is what I am trying to achieve
var box = new BoxBuilder('#box-container').setSize(300, 250);

Did you call `new BoxBuilder(...)` *after* the DOM was loaded? — Rocket Hazmat, Jan 25 '16 at 19:47
How do you call it for the first one? Do you include the "#" like you do with jQuery? If you do, there is your problem... — epascarello, Jan 25 '16 at 19:49
Thanks... my problem was calling it before the dom ready :) cheers — mehany, Jan 25 '16 at 19:51
@RocketHazmat where is more appropriate to handle the dom ready event, outside of the class or inside? — mehany, Jan 25 '16 at 19:54
I'd put it outside the class. I think it's cleaner that way. — Rocket Hazmat, Jan 25 '16 at 19:57

score 3 · Answer 1 · answered Jan 25 '16 at 19:50

You're using a CSS selector where it's not supposed to be used. jQuery takes CSS selectors such as #box-container then strips off the # because that indicates it's an ID. To use document.getElementById just avoid using #.

So rewrite your assignment line as:

var box = new BoxBuilder('box-container').setSize(300, 250);

score 2 · Answer 2 · answered Jan 25 '16 at 19:49

When you use straight JavaScript, you are getting null because you don't use the # as a part of the ID. That is an identifier for jQuery that you are looking for an element with that ID. The alternative is ., which would be by class. (Other CSS style selectors are also valid.)

So what you want to send when only using JavaScript is var box = new BoxBuilder('box-container').setSize(300, 250);

score 1 · Answer 3 · answered Jan 25 '16 at 20:03

1

You need to make sure that you are calling document.getElementById after the DOM is loaded. Otherwise, you won't find anything.

window.addEventListener('load', function(){
    var box = new BoxBuilder('box-container').setSize(300, 250);
});

answered Jan 25 '16 at 20:03

Rocket Hazmat

204,503
39
283
323

Why getElementById returns null when called inside a Class?

3 Answers3