Using a document method from within object prototype?

Question

I'm pretty new to javascript and am trying to set up a prototype called "number" with a key called "button" that grabs the HTML element with whatever ID you pass it. There is an element with the ID of "one" already present in the HTML.

I'm wondering why this doesn't work?

function number(num, idOfNum) {
 this.val = num;
 this.button = document.getElementById(idOfNum);
};

var one = new number(1, "one");

console.log(one.button); // null?

Try to put this at the end of the body or wrap it in window.onload = function(){} — baao, Jun 19 '15 at 23:54

score 3 · Answer 1 · edited May 23 '17 at 11:43

If one.button is null, then that's just because document.getElementById("one"); did not find a DOM object when you ran the constructor for your number() object and thus is returned null.

That could either be because there is no object in the page with that id or it could be becase you are running this code before the page has finished loading and thus that object does not yet exist when you run the code.

You would have to show more of the overall page context (where the code is executing in relation to the parsing of the page DOM) for us to know exactly which situation was happening here.

A common fix for the situation where you're running the code too soon is to move the <script> tag where this code resides to right before the </body> tag. This will ensure that all DOM elements exist when this code runs. For a more complete explanation of this issue see this answer: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it.

Using a document method from within object prototype?

1 Answers1