Why does my javascript only fire when the code is repeated?

Question

I'm having an issue where I can only get my code to fire if I repeat it. See the below example. While the code is nearly identical if I take either of the two scripts out the code doesn't function with just one, yet if I run both the script fires fine, but only one instead of two. give it a go.

This works (but only one script fires):

<script type="text/javascript">
var url = window.location.href + "";
document.write('<script type="application/javascript" src="https://testdomain.com/mik21?add=2140535&mik21=' + url + '"/>');
</script>

<script type="text/javascript">
var url = window.location.href + "";
document.write('<script type="application/javascript" src="https://testdomain.com/mik?add=2140535&mik=' + url + '"/>');
</script>

This does not work:

<script type="text/javascript">
var url = window.location.href + "";
document.write('<script type="application/javascript" src="https://testdomain.com/mik21?add=2140535&mik21=' + url + '"/>');
</script>

Or this:

<script type="text/javascript">
var url = window.location.href + "";
document.write('<script type="application/javascript" src="https://testdomain.com/mik?add=2140535&mik=' + url + '"/>');
</script>

Does anyone have any ideas? this is definitely the weirdest thing I've seen in a while.

Thanks,

don't use document.write is my first hint, who knows why that's even still valid in browsers since about 2005 — Jaromanda X, Jul 03 '15 at 09:24
https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — birdspider, Jul 03 '15 at 09:24
http://javascript.info/tutorial/document-write , Link may have the answer for the question. Just read the text inside heading "The benefits and uses" — Dreamweaver, Jul 03 '15 at 09:25
@feeela True, but the above code works fine in jsFiddle anyway :) — CodingIntrigue, Jul 03 '15 at 09:26
@RGraham the individual scripts work on their own or they only work together? i can only see them working together. — Michael Wa, Jul 03 '15 at 09:29
can you share your complete html.... the code you have shared should work.... — Arun P Johny, Jul 03 '15 at 09:36
Possible duplicate of [Why don't self-closing script tags work?](https://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work) — kenorb, Aug 15 '17 at 15:24

Salman A · Answer 1 · 2015-07-03T10:49:28.847

The problem is that your script tag is broken. A <script> tag must be closed by </script>.
Now here is what happens:

Example 1

<script>
  document.write('<script src="test.js"/>');
</script>

Produces the following markup HTML:

<script>
  document.write('<script src="test.js"/>');
</script>
<script src="test.js">
  </body>
  </html>

In general, browsers do not execute a <script> block until they find the corresponding </script>. There is no explicit closing tag in the above example so the browser ignores the tag.

Example 2

<script>
  document.write('<script src="test.js"/>');
</script>
This HTML will be consumed
<script>
  document.write('<script src="test.js"/>');
</script>

Produces the following output:

<script>
  document.write('<script src="test.js"/>');
</script>
<script src="test.js">
  This HTML will be consumed
  <script>
  document.write('<script src="test.js"/>');
</script>

Notice that the dynamically written script tag is not closed. The browser will match this tag with the second </script> in the markup; everything in-between (incorrectly) becomes part of this tag.

Solution

When using document.write, make sure that you close <script> tags properly. But note that you cannot use </script> as-is inside JavaScript code since it signals end of script block. You can use the following trick:

<script>
  document.write('<script src="test.js"><\/script>');
</script>

Note: If someone is wondering why the browser does not raise syntax errors, the answer is: the browser will ignore script tag's content when the `src` attribute is present. — Salman A, Jul 03 '15 at 11:44

score 6 · Accepted Answer · edited May 23 '17 at 11:43

I have just tested this:

Consider the source

data:application/javascript;base64,Y29uc29sZS5sb2coIlRlc3QiKTs=

This points to the following code:

console.log("Test");

This snippet below generates

<script src="data:application/javascript;base64,Y29uc29sZS5sb2coIlRlc3QiKTs="/>

<div>A</div>
<script>
document.write('<script src="data:application/javascript;base64,Y29uc29sZS5sb2coIlRlc3QiKTs="/>');
</script>
<div>B</div>

However, this snippet below generates

<script src="data:application/javascript;base64,Y29uc29sZS5sb2coIlRlc3QiKTs="></script>

<div>A</div>
<script>
document.write('<script src="data:application/javascript;base64,Y29uc29sZS5sb2coIlRlc3QiKTs="></'+'script>');
</script>
<div>B</div>

The first snippet logs "Test" but doesn’t display “B” in the HTML. The second works properly. In the Real-time HTML Editor not even "Test" gets logged for the first one. The implication of that is that all the HTML below the <script/> (which is inserted as <script>) gets consumed as Salman A’s answer points out.

This is because the only valid syntax for <script> tags is <script></script> and not <script/>.

score 3 · Answer 3 · answered Jul 03 '15 at 09:39

This works:

<script type="text/javascript">
var url = window.location.href + "";
document.write('<script type="application/javascript" src="https://testdomain.com/mik21?add=2140535&mik21=' + url + '"></scr'+'ipt>');
document.close();
</script>

To prevent js from crashing, i've split the <script> tag into two strings.

Why does my javascript only fire when the code is repeated?

3 Answers3