Setting innerHTML string produces syntax errors

Question

I've looked on here and most say that its escape problems so I think I too am at fault of this. I look on google and most have example of replace the text of one div with another etc.. here I want to replace the default content of " mainMidSec" with what I have on the if statement in the .js

I'm trying to test something out for a mobile site...but I'm getting syntax errors. I'm almost positive it has to do with quotes etc...I've tried outer double inner single quotes and the other way around and its not taking it.

Here is the code:

<script type="text/javascript">

var screenW = document.getElementById('mainMidSec');

if ((screen.width<=800) && (screen.height<=800))
{

screenW.innerHTML = '<video width="500" height="400" controls poster="imgs/vidPosterImgSMALLER.jpg">
    <source src="videos/mp4-video-versions/2010reel_MP4.mp4">
    <p> Your current web browser is out of date . Please update it wont you...pretty please?</p>
</video>'

}

</script>

Any ideas / suggestions / knowledge bombs you guys drop on me I'll gladly and humbly accept!

if new to javascript I would advise you to look into javascript frameworks. A very popular one is jquery.com — Alfred
– Alfred, Commented Jul 27, 2011 at 23:08
thanks Alfred. i am new to .JS and i mean i understand it but im a super noob! so i was/am trying to learn the basics b4 i went to the framwork. — somdow
– somdow, Commented Jul 29, 2011 at 11:02

Guffa · Accepted Answer · 2011-07-27 23:06:45Z

5

You can't split a string across several lines.

Put the string on a single line:

screenW.innerHTML = '<video width="500" height="400" controls poster="imgs/vidPosterImgSMALLER.jpg"><source src="videos/mp4-video-versions/2010reel_MP4.mp4"><p> Your current web browser is out of date . Please update it wont you...pretty please?</p></video>';

Or make each line a separate string:

screenW.innerHTML = '<video width="500" height="400" controls poster="imgs/vidPosterImgSMALLER.jpg">' +
  '<source src="videos/mp4-video-versions/2010reel_MP4.mp4">' +
  '<p> Your current web browser is out of date . Please update it wont you...pretty please?</p>' +
  '</video>';

answered Jul 27, 2011 at 23:06

Guffa

703k112 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bfavaretto · Accepted Answer · 2011-07-27 23:07:09Z

2

In javascript, you cannot have line breaks inside a string. Try:

screenW.innerHTML = '<video width="500" height="400" controls poster="imgs/vidPosterImgSMALLER.jpg"><source src="videos/mp4-video-versions/2010reel_MP4.mp4"> <p> Your current web browser is out of date . Please update it wont you...pretty please?</p></video>'

Also, take a look at CSS Media Queries, which are the recommended way to deal with alternate layouts for mobile devices.

answered Jul 27, 2011 at 23:07

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

2 Comments

somdow Over a year ago

long story short, i went for this because theres a huge flash file in the main site, and i want to replace it with a smaller one on the server depending on screen size. will media queries also do this? thanks

bfavaretto Over a year ago

No. I think the best way to do that is server-side, with php, asp or whatever. If you must use only html and javascript, you have to use js. I'm afraid in this case the browser may initiate a request for the big file before the replacement finishes.

rabs · Accepted Answer · 2011-07-27 23:07:21Z

1

Change:

screenW.innerHTML = '<video width="500" height="400" controls poster="imgs/vidPosterImgSMALLER.jpg">
<source src="videos/mp4-video-versions/2010reel_MP4.mp4">
<p> Your current web browser is out of date . Please update it wont you...pretty please?</p>

'

To :

screenW.innerHTML = '<video width="500" height="400" controls poster="imgs/vidPosterImgSMALLER.jpg"> ' +
'<source src="videos/mp4-video-versions/2010reel_MP4.mp4"> ' +
'<p> Your current web browser is out of date . Please update it wont you...pretty please?</p> ' +

''

answered Jul 27, 2011 at 23:07

rabs

1,8273 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

Setting innerHTML string produces syntax errors

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related