Javascript OOP, does not give me an error yet code does not work

Question

+ function Engine() {

    var createObject = function(elemClass, height, width){

        this.element = document.createElement('div');

        $(this.element).addClass(elemClass)
        $(this.element).css('height', height);
        $(this.element).css('width', width);

    };

    var box1 = new createObject('box', 200, 400);

    $('body').append(box1.element);

}();

Why does the following code provide no error? yet it also does not create the div within the body tag. Lets assume the body is empty. Any help will be greatly appreciated.

Thanks,

Why is there a unary operator in front of the function declaration? — crush, Jan 23 '14 at 21:09
Lack of an error message does not guarantee proper behavior. — Robert Harvey, Jan 23 '14 at 21:10
@crush looks like an [IIFE](http://en.wikipedia.org/wiki/Immediately-invoked_function_expression). — Sirko, Jan 23 '14 at 21:10
@crush: See [What does the exclamation mark do before the function?](http://stackoverflow.com/q/3755606/1048572). It could be anything. — Bergi, Jan 23 '14 at 21:11
@crush - adding a `!`, `+`, `(` in front of the function makes it an IIFE — adeneo, Jan 23 '14 at 21:11
Oh, so he's saving a byte by making it slightly less obvious what is happening. — crush, Jan 23 '14 at 21:12
My guess is that *is* adding the div, but since it has no content, you can't see it. Your code seems to work for me (I added some CSS to make it ovbious): http://jsfiddle.net/2TA3f/ — gen_Eric, Jan 23 '14 at 21:13
You probably did not wait until the DOM is ready to run that code. That's it. Get rid of the IIFE and wrap your code within `$(function () { ...});` — plalx, Jan 23 '14 at 21:15
Seems that this style of IIFE is better suited for post-minification. Maybe I stand alone with that opinion. I'm okay with that. — crush, Jan 23 '14 at 21:16

score 1 · Answer 1 · edited May 23 '17 at 12:03

1

Why does the following code provide no error?

Three possible reasons: The code didn't run, there is no error, or you did not see it. I'd guess the second.

yet it also does not create the div within the body tag.

Maybe because there is no <body> element which could match your selector at the time the code runs. $('body') can be an empty collection and jQuery does not grump about it.

Have a look at Why does jQuery or a DOM method such as getElementById not find the element? for exact reason and some solutions, the easiest of which will be using jQuery():

$(function Engine() {
    …
    $('body').append(box1.element);
});

edited May 23 '17 at 12:03

Community

1
1

answered Jan 23 '14 at 21:14

Bergi

630,263
148
957
1,375

1

That's one of the things I hate about jQuery. It advocates error swallowing. – plalx Jan 23 '14 at 21:17
@plalx: +1, however, warnings about empty collections can hardly be implemented in such a universal `$` function… – Bergi Jan 23 '14 at 21:20
I do not mind an empty collection when I'm checking element existence only, but I do mind invoking certain operations on them. Perhaps they should have implemented the default `$` function to throw when empty and implement a second `$.query` function that doesn't... – plalx Jan 23 '14 at 21:33

score 1 · Accepted Answer · answered Jan 23 '14 at 21:19

1

It depend on where in the page you put your script code.

if it is inside the body element, then the document already contains a body element, $('body') return it and all work fine.

if it is in head element, the body does not exists yet at the time your script run, $('body') return an empty collection, and are appending the div into nothing.

You get no errors because jquery does not throw an error i this case.

If you want to write the script inside head element, wrap it in a document.ready call:

<script>
+ function Engine() {
      $(document).ready(function(){
        var createObject = function(elemClass, height, width){

            this.element = document.createElement('div');

            $(this.element).addClass(elemClass)
            $(this.element).css('height', height);
            $(this.element).css('width', width);

        };

        var box1 = new createObject('box', 200, 400);

        $('body').append(box1.element);

     });

}();
</script>

and it will work.

answered Jan 23 '14 at 21:19

Andrea Parodi

5,534
27
46

Awesome that works, thanks for the explanation as well! Just to clarify my code was in the head. – user3229616 Jan 23 '14 at 21:42
@user3229616 Please note that the IIFE is completely useless here. The function passed to `$(document).ready` already generates a new scope. Also if you are concerned about saving bytes, you can pass a function directly to `$()`, rather than calling `ready`. – plalx Jan 23 '14 at 22:04
@plalx great! I will take that into account, thanks for the note. – user3229616 Jan 23 '14 at 22:18
I agree, and it is even more concise if you put scripts at end of body element: you can even skip the $() because body element is already in the DOM – Andrea Parodi Jan 23 '14 at 22:22

Javascript OOP, does not give me an error yet code does not work

2 Answers2