I'm facing a peculiar issue with JavaScript in my Blogger code when dealing with certain characters like '¡' and '?'.
For instance, the following code snippet displays ñéúüëò¡!¿? inside the div but shows
as an alert message.ñéúüëò¡!¿?
<div id="test">
</div>
<script>
(function () {
document.getElementById("test").innerHTML = 'ñéúüëò¡!¿?';
alert('ñéúüëò¡!¿?');
})();
</script>
</pre>
Upon inspecting the generated code, we observe that the JavaScript tag has been altered to:
<script>
(function () {
document.getElementById("test").innerHTML = 'ñéúüëò¡!¿?';
alert('ñéúüëò¡!¿?');
})();
</script>
Nevertheless, I have discovered that using an external JS file resolves the issue:
<div id="test">
</div>
<script src="http://foo.bar/file.js"></script>
The content of the UTF-8 encoded js file is:
document.getElementById("test").innerHTML = 'ñéúüëò¡!¿?';
alert('ñéúüëò¡!¿?');
This results in the desired output: ñéúüëò¡!¿? within the div and ñéúüëò¡!¿? as the alert message.
Furthermore, an odd workaround involves inserting the following code in Blogger, despite its lack of cleanliness, to achieve the desired outcome:
<div id="div1" style="display:none">¡</div>
<div id="div2" style="display:none">¿</div>
<div id="test">
</div>
<script>
(function () {
document.getElementById("test").innerHTML = 'ñéúüëò¡!¿?';
alert('ñéúüëò'+ document.getElementById('div1').innerHTML + '!' + document.getElementById('div2').innerHTML +'?');
})();
</script>
If anyone can provide insights on how to write neat and efficient code to address this issue without relying on external JS files, it would be greatly appreciated.