CODEWITHSUNDEEP
javascriptember.js
Jesper
Jesper

Reputation: 2814

Unclosed element error in Ember template

I'm getting this error:

Error: Unclosed element `container.style.display` (on line 25).

Line 25 of my program is:

if ((container.style.opacity -= .01) <= 0)

But I think it's referring to the line below:

container.style.display = "none";

Why am I getting this error?

The context:

<script>
var container = document.getElementById('popUpContainer');

function popUpFadeOut() {
    if (container.style.opacity == 0) {
        container.style.opacity = 1;
        container.style.display = "block";

        var fading = function fade() {

            if ((container.style.opacity -= .01) <= 0) {
                container.style.display = "none";
                container.style.opacity = 0;
            } else {
                requestAnimationFrame(fade);
            }
        };

        setTimeout(fading, 1000); //popup box fades away after 1 seconds
    }
};
</script>

Upvotes: 0

Views: 579

Answers (1)

user663031
user663031

Reputation:

The error message you mention comes in an HTML parsing context, most likely HTMLBars, meaning you are including a script in a template, which you shouldn't be doing in the first place.

The quick fix is to replace < with &lt;. The correct solution is to move the script from the template into a JS file where it belongs.

Note that this would not be a problem in an HTML file, because script tags (today) are "protected", and the only HTML inside of that that could cause a problem is something like const foo = "</script>";. It appears that the HTML parsing login in HTMLBars does not implement this "protection" mechanism. In theory this could be considered a bug, but no-one has ever worried about it, and no-one will ever fix it, because you shouldn't put script tags in templates anyway.

Upvotes: 2

Related Questions