Using document.write with an

Question

The code below works as is. I want to use this code to display specific Twitch streams based on the page that is loaded.

<script type="text/javascript">
    var stream = location.pathname;
    switch (stream) {
       case "/defatank":
          document.write("Defatank's Live Stream Page");
          break;
       case "/seeingblue":
          document.write("SeeingBlue's Live Stream Page");
          break;
       case "/shiroshii":
          document.write("Shiroshii's Live Stream Page");
          break;
       case "/theend66":
          document.write("TheEnd66's Live Stream Page");
          break;
       case "/wakawaka647":
          document.write("WakaWaka647's Live Stream Page");
          break;
       case "/xtheguythatplays":
          document.write("XTheGuyThatPlays' Live Stream Page");
          break;
    }
    </script>

When I try to replace

"Defatank's Live Stream Page"

with the object below it doesn't work and breaks the rest of the cases.

<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=defatank" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=defatank&auto_play=true&start_volume=25" /></object>

I'm sure I'm probably using document.write wrongly or should be using something entirely different. Any suggestions?

EDIT: Here is what the finished product looks like.

<script type="text/javascript">
    var stream = location.pathname;
    switch (stream) {
       case "/defatank":
          document.write("<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=defatank" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=defatank&auto_play=true&start_volume=25" /></object>");
          break;
       case "/seeingblue":
          document.write("SeeingBlue's Live Stream Page");
          break;
       case "/shiroshii":
          document.write("Shiroshii's Live Stream Page");
          break;
       case "/theend66":
          document.write("TheEnd66's Live Stream Page");
          break;
       case "/wakawaka647":
          document.write("WakaWaka647's Live Stream Page");
          break;
       case "/xtheguythatplays":
          document.write("XTheGuyThatPlays' Live Stream Page");
          break;
    }
    </script>

I also tried removing the "" from document.write() and it still dont load and breaks the rest of the cases.

What you have should work, if done correctly. Can you show your attempt to write out the tag instead of the text? — Guffa, Aug 09 '13 at 22:52
My guess would be you need to change the double quotes for the attributes in object to single ones (else it ends the document.write string). — Ben, Aug 09 '13 at 22:54
Useful tip: always have your browser's javascript console open while developing. It will tell you about syntax errors like that. — bfavaretto, Aug 09 '13 at 22:59
Why you shouldn't use document.write: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Abdullah Jibaly, Aug 09 '13 at 23:08

Ben · Accepted Answer · 2013-08-09T23:18:28.280

For your specific case the easiest fix (in my opinion) is to change the double quotes for the attributes in object to single ones (else it ends the document.write string). This should work

<script type="text/javascript">
    var stream = location.pathname;
    switch (stream) {
       case "/defatank":
          document.write("<object type='application/x-shockwave-flash' height='378' width='620' id='live_embed_player_flash' data='http://www.twitch.tv/widgets/live_embed_player.swf?channel=defatank' bgcolor='#000000'><param name='allowFullScreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='allowNetworking' value='all' /><param name='movie' value='http://www.twitch.tv/widgets/live_embed_player.swf' /><param name='flashvars' value='hostname=www.twitch.tv&channel=defatank&auto_play=true&start_volume=25' /></object>");
          break;
       case "/seeingblue":
          document.write("SeeingBlue's Live Stream Page");
          break;
       case "/shiroshii":
          document.write("Shiroshii's Live Stream Page");
          break;
       case "/theend66":
          document.write("TheEnd66's Live Stream Page");
          break;
       case "/wakawaka647":
          document.write("WakaWaka647's Live Stream Page");
          break;
       case "/xtheguythatplays":
          document.write("XTheGuyThatPlays' Live Stream Page");
          break;
    }
</script>

The JavaScript interpreter needs to know where a string begins and ends and the quote marks are used to do that. You can use single or double quotes for JavaScript strings. If you want to use the same quote type in a string that you used to deliminate the string, then that quote characters must be escaped - otherwise the interpreter gets confused and thinks the string has ended early.

Some examples

1. "Good string"
1. "Broken "hi" string"
1. "Good 'hi' string"
1. "Good \"hi\" string"

The 2nd string will not work because the interpreter thinks it ended just before the word hi - as indicated by the double quotes.

The 3rd string is fine because it uses single quotes for hi instead.

The 4th string is also fine because it "escapes" the double quote characters to let the interpreter know the following character should be treated literally and not as JavaScript code.

There's a little more details on JavaScript strings here: http://www.w3schools.com/js/js_obj_string.asp

So in summary, as the HTML spec allows for single, double, or not quoted attributes, changing the double quotes to single resolves the issue.

You were absolutely correct. This fixed it. Thank you so much! That was actually pretty simple. Should have known. — Josh, Aug 09 '13 at 23:00
@Ben Is there a way to get the rest of this code to play nicely? If I try to do it this way it breaks again. `document.write(" — Josh, Aug 09 '13 at 23:21
@Ben Ok noticed you already answered my questions. Thank you! — Josh, Aug 09 '13 at 23:29

score 2 · Answer 2 · answered Aug 09 '13 at 22:59

You need to escape the quotation marks inside the string if you use quotation marks as delimiters. Usually I use apostropes to delimit a string that has quotation marks.

(Note however that the & characters in the attributes should be HTML encoded as & to make it correct HTML code.)

document.write('<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=defatank" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&amp;channel=defatank&amp;auto_play=true&amp;start_volume=25" /></object>');

score 0 · Answer 3 · answered Aug 09 '13 at 22:53

According to http://www.w3schools.com/jsref/met_doc_write.asp,

The write() method writes HTML expressions or JavaScript code to a document.

This means that you can't pass a DOMObject or regular Object into document.write. If that "object" you listed was actually a string, then you could pass it into document.write. If you're trying to add a DOMObject to the page, try using document.body.addChild(object);

I tried that. Simply replaced `object` with the actual object it still breaks everything. — Josh, Aug 09 '13 at 22:58

score 0 · Answer 4 · answered Aug 09 '13 at 23:05

You definitely do not want to use document.write. Instead, use the DOM methods to create and append the element:

var obj = document.createElement('object'),
    param = document.createElement('param');
object.setAttribute('type', 'application/x-shockwave-flash');
param.setAttribute('name', 'allowFullScreen');
obj.appendChild(param);
// rest of params and attributes
document.body.appendChild(obj);

4 Answers4