How to access an HTML element within a self invoked function.

Question

I am pretty new to JavaScript so I don't know the ins and outs of the language but I do have some knowledge of it. I created a self invoked function that would sort an array of zip-codes and then output it to a div element in the html file.

Unfortunately, the output isn't going into the div element because the function is executed before the html elements is ready, therefor it doesn't exist.

Is there anyway that I could access the div element within the function without having to use Window.Load, etc?

Thank you! click on the link below to view my function.

Screenshot of function

Add the script at the bottom of the tag instead of at the top — Jorg, Feb 12 '18 at 04:33
Possible duplicate of [TypeError: getElementById is null](https://stackoverflow.com/questions/24972488/typeerror-getelementbyid-is-null) — blurfus, Feb 12 '18 at 04:37
Take a look at [this](https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) — Rusty, Feb 12 '18 at 04:40
You should add the relevant code no a screenshot See: [How to create a Minimal, Complete, and Verifiable example.](http://stackoverflow.com/help/mcve) — Satpal, Feb 12 '18 at 04:40
@Nate did you read it? it's the same issue: trying to invoke a call to `getElementyById(...)` before the element is rendered into the DOM - the solution suggested is the same in both: move your JS to the end of the body tag — blurfus, Feb 12 '18 at 04:41

score 0 · Answer 1 · answered Feb 12 '18 at 04:34

0

Is there anyway that I could access the div element within the function without having to use Window.Load, etc?

Just move that code to the end of your html - after elements in question. For example after </body>

answered Feb 12 '18 at 04:34

c-smile

24,546
7
54
79

after `
` or just before it?
– blurfus Feb 12 '18 at 04:42

Florian Suess · Answer 2 · 2018-02-12T05:08:07.127

From what I know, you can't access the DOM if it doesn't exist in that moment.

I know I know, don't use window.onload. But I assure you this is different than waiting for the DOM to load and then follow up with your calculations.

You can have a function evaluate something, then actually hang on the result and wait, and then finally fill the innerHTML when the DOMContentLoaded event has fired... or perhaps something of similar flavour, have a look at this.

<script>
    const calculations = (function () {
        // Super smart calculations...

        var output = "Result of smart calculations";

        function findWhereOutputGoes() {
            return document.getElementById('output-div');
        }

        return {
            output: output,
            findWhereOutputGoes: findWhereOutputGoes,

        }
    })();

    document.addEventListener('DOMContentLoaded', function(){ // Fires as soon as DOM has loaded
        calculations.findWhereOutputGoes().innerHTML = calculations.output;
    });
</script>
<div id="output-div">

</div>

How to access an HTML element within a self invoked function.

2 Answers2