0

I recently came across this surprising issue with Stack-Snippets.

The snippet below is a perfectly normal scenario where the syntax of both HTML and JavaScript is correct, and it runs as expected.

alert("Javascript works.");
<div>Some content</div>

However, if you just removed the very last character in the HTML, i.e. the closing bracket > of the closing </div> tag, it doesn't render correctly. Specifically, instead of running the JavaScript code as JavaScript, the browser prints it on screen.(1)(2)(3)

alert("Javascript works.");
<div>Some content</div


It seems like the browser is trying to guess the correct syntax of resulting HTML document, and it fails to do so. So the issue could be considered a of the browser.

I am marking this as a considering that even if it may be caused because of the design of browsers, the behaviour may still perplex new/inexperienced users (given there are no obvious errors), and prevent them from being able to create MCVE.


(1) Here's how it appears to me on Chrome and Firefox.

(2) I tested the same HTML markup and JavaScript on JSFiddle.net, and it also fails partially. You can see the snippet here: https://jsfiddle.net/mmqycddm/

(3) Surprisingly, CodePen survives this: https://codepen.io/Nisargshah02/pen/VrayGy

16
  • 6
    The script is inserted at the end of the body, right? If so, the behavior you're seeing is caused by the script start tag being eaten up by the incomplete div end tag.
    – BoltClock
    Nov 4, 2017 at 13:48
  • @BoltClock Yup, I did check that in the Dev tools (F12). That's why I tagged it as [feature-request]. Nov 4, 2017 at 14:02
  • 3
    To the downvoters, the behaviour of invalid HTML is well-defined by the HTML5 spec, and not practically an error condition any more. It would be nice if these cases could be handled properly, though obviously not as a high priority.
    – Jeremy
    Nov 4, 2017 at 18:58
  • 2
    Why should this markup be fixed by StackSnippets? It is an error/typo the author made. This is normal behavior for it to be broken. Fixing such typos for authors may invalidate typos they really have in code.
    – Kaiido
    Nov 6, 2017 at 1:47
  • @JeremyBanks and where does StackSnippet's behavior differ from the specs? StackSnippet doesn't parse the content, your browser does. All StackSnippet does is to deliver what the author wrote. In this case, it does handle this task correctly.
    – Kaiido
    Nov 6, 2017 at 1:49
  • 1
    @Kaiido: Because it results in unexpected behavior that can only be reproduced in very specific circumstances. Stack Snippets places the script content at the end of the body, which the author isn't going to expect or assume unless they're already used to using that technique on their own sites. You aren't going to reproduce this behavior in a true MCVE (e.g. a blank page or a data URI) unless you explicitly place your script element at the end of the body like Stack Snippets does.
    – BoltClock
    Nov 6, 2017 at 2:59
  • @BoltClock but an un-closed tag will break the doc, except if it were the last characters of the document. IMO auto-fixing it is plain wrong. StackSnippets should stick to its work: deliver author content as he wrote it.
    – Kaiido
    Nov 6, 2017 at 3:03
  • @Kaiido Also we are not talking about fixing the typo. I was really hoping for something like Tiny Giant's answer that prevents the HTML syntax issue from affecting the JavaScript processing. Nov 6, 2017 at 3:03
  • @Kaiido: And this post is saying Stack Snippets is not doing that job right.
    – BoltClock
    Nov 6, 2017 at 3:05
  • 1
    @BoltClock why? Then should we also say that it doesn't do its job right because if I type in javascript document.getElementById(XXX) it does return the correct element while when I paste it in my head's script it returns null? OP made a typo, stacksnippet is not responsible for this typo, and it should simply be fixed by OP. But let's agree we'll disagree here.
    – Kaiido
    Nov 6, 2017 at 3:07
  • 1
    For those who don't understand what I'm talking about, compare data:text/html,<script>alert("Javascript works.");</script><div>Some content</div with data:text/html,<div>Some content</div<script>alert("Javascript works.");</script>. The latter is how Stack Snippets renders your HTML and JS. If this is what most authors expect, then nothing needs to be changed. If this is not what most authors expect from an MCVE, then Stack Snippets needs to be changed to behave closer to author expectations if it wants to be The Premier Tool for Producing JavaScript/HTML/CSS MCVEs™.
    – BoltClock
    Nov 6, 2017 at 3:17
  • When even JSFiddle runs the user JS as expected, is there any wonder people still rely on it over Stack Snippets? (I personally only use Stack Snippets when I know that any of its differences from a plain page will not result in unexpected behavior, which, granted, is 99% of use cases, but I have not shied away from using data URIs for HTML snippets where appropriate.)
    – BoltClock
    Nov 6, 2017 at 3:18
  • Speaking of 99% of use cases, I should of course point out that such a typo as an unclosed tag - if it is part of the actual markup and not a copy error - would be subject to closure and deletion anyway, but that doesn't change the fact that Stack Snippets demonstrably does not behave as some might expect of an MCVE.
    – BoltClock
    Nov 6, 2017 at 3:22
  • @BoltClock saying that it does work in jsfiddle is not the thruth. It does work because jsfiddle does By default wrap the script content in an onload event, if you choose to place js in the body, then it also fails, with some other output: jsfiddle.net/snu5v6oe Yes I think the majority of us do expect the script to run after the HTML part has been parsed, otherwise we would have to have the same options as jsfiddle, i.e wrap in head, wrap in onload, wrap in body. But that's an other FR that I wouldn't downvote.
    – Kaiido
    Nov 6, 2017 at 3:33
  • @Kaiido: Ha, I totally forgot about that. That only further cements my point about fiddling tools deviating from what people would expect from an MCVE.
    – BoltClock
    Nov 6, 2017 at 3:35

1 Answer 1

3

This answer identifies a possible fix for the Stack Overflow developers. This is not intended as a workaround, as the logical thing to do in such cases would be to correct the typo.

Place an HTML comment between the two sections.

alert("Javascript works.");
<div>Some content</div
<!-- -->

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .