Why does this javascript function need to be placed after the html code?

Question

I have a "Font Awesome" question mark on my webpage. When the user hovers over it, a popover appears via javascript. What's odd (to me), is since the javascript code is AFTER my html code, it works fine.

This works

<div class="margin-top-sm">Enter email: <span class="fa fa-question-circle text--secondary pop" data-container="body" data-toggle="popover" data-placement="right" data-content="My popover text"></span></div>

 <script type="text/javascript">
    $(".pop").popover({
        trigger: "manual",
        html: true,
        animation: false
    })
        .on("mouseenter", function () {
            var _this = this;
            $(this).popover("show");
            $(".popover").on("mouseleave", function () {
                $(_this).popover('hide');
            });
        }).on("mouseleave", function () {
            var _this = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide");
                }
            }, 300);
        });
</script>

If I place my javascript ABOVE the html however, it doesn't work.

This doesn't work

 <script type="text/javascript">
    $(".pop").popover({
        trigger: "manual",
        html: true,
        animation: false
    })
        .on("mouseenter", function () {
            var _this = this;
            $(this).popover("show");
            $(".popover").on("mouseleave", function () {
                $(_this).popover('hide');
            });
        }).on("mouseleave", function () {
            var _this = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide");
                }
            }, 300);
        });
</script>

 <div class="margin-top-sm">Enter email: <span class="fa fa-question-circle text--secondary pop" data-container="body" data-toggle="popover" data-placement="right" data-content="My popover text"></span></div>

I only ask because this is an mvc website & I'd like to toss my javascript within a "Script" @section tags. My "Script" section is at the top of the page in my <head> section.

So anyway, just curious why this happens?

Thanks

`console.log($(".pop").length)` == 0 when `.pop` doesn't exist yet, at the end of the code it exists. `$(selector)` is not a live query, it only finds elements that exist at the time the code runs — freedomn-m, Jan 19 '22 at 18:49

score 1 · Answer 1 · answered Jan 19 '22 at 18:12

The position of where you place the script tag is indeed important and can have effect your code as you just experienced. Browsers behaves in the way that they parse the HTML from top to bottom, so elements are added to the DOM and scripts are executed as when they are encountered, meaning that order you place the elements and the tags does matters. scripts won't be able to find elements and perform manipulation on them if they appear later in the markup html code because those elements have yet to be added to the DOM.

Let's walk through on what's happening when a browser loads a website with a certain script tag:

Fetches the HTML page
Browser start parsing the HTML
The parser encounters a script tag referencing an external script file and requests that file. Meanwhile, the parser blocks (unless the async or defer key word exist) and stops parsing the rest of the HTML.
After some time the script is downloaded and subsequently executed.
The parser then can continue parsing the rest of the HTML document.

So, in step 4, since the parser didn't yet parse the HTML document, he won't be able to work with the rest of the HTML and that is why your script tag has to be located at the bottom.

+1. Just wanted to add that the way to deal with this timing issue is to write your javascript in such a way that it reacts to a signal sent when the browser is done parsing. Instead of saying "Parse and execute this javascript right away", you change the behavior to be "Remember this code, and execute it in response to the document being done loading" Further reading if interested: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event — bdunn313, Jan 19 '22 at 18:18

Why does this javascript function need to be placed after the html code?

1 Answers1