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 status-by-design of the browser.
I am marking this as a feature-request 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
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.data:text/html,<script>alert("Javascript works.");</script><div>Some content</div
withdata: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™.