Pass document object to function

Question

I have a javascript code written following the module pattern:

var controller = function () {

    return {
        init: function() {
            // settings and initialization    
        }

        makeUIactions: function() { 
             //set UI actions, for example callback function of a button:
            document.getElementById("ShuffleButton").addEventListener("click", Shuffle);
            function Shuffle(){};
        }
    }
}

How do I pass by document object to makeUIactions?

P/S: I got the following error:

Cannot read property 'addEventListener' of null

Is it because I can't access document from makeUIactions?

HTML:

<script>
    controller.init();
    controller.makeUIactions();
</script>

<div>
    <input type="button" id="ShuffleButton" style="margin-top:20px" value="Shuffle" data-inline="true">

    <input type="button" id="SubmitButton" style="margin-top:20px" value="Submit" data-inline="true">
</div>

How do I pass by document object to makeUIactions? Explain this a little more. What are you trying to do? — Amit Joki
– Amit Joki, Commented Mar 9, 2015 at 5:11
The document object is a global variable in a browser accessible from anywhere. It does not need to be passed unless you're using some sort of embedded document like an iframe. — jfriend00
– jfriend00, Commented Mar 9, 2015 at 5:12
Can you show us the HTML? Seems there is no element with the ID of ’button'. — jkd
– jkd, Commented Mar 9, 2015 at 5:21
Try to load script at the end..or you can specify your functionalities inside window.onload.. — Rakesh_Kumar
– Rakesh_Kumar, Commented Mar 9, 2015 at 5:30

Community · Accepted Answer · 2017-05-23 10:09:53Z

2

Your code is running BEFORE the DOM has been loaded thus, document.getElementById("ShuffleButton") cannot find the DOM element so it returns null. When you then try null.addEventListener(), it throws the error you see.

You can fix it by moving this:

<script>
    controller.init();
    controller.makeUIactions();
</script>

to be right before your </body> tag so that the DOM elements are in place before the script runs. See this answer pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it for lots more details.

edited May 23, 2017 at 10:09

CommunityBot

11 silver badge

answered Mar 9, 2015 at 5:35

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass document object to function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related