Uncaught SyntaxError: Unexpected token }

@B_vidlerDec 02.2013

Hi all,

i have the following code

[CODE]<body onload=”showvideos()”> <div id=”video_container” style=”width:100%”>

</div>

<script>

function showvideos() {

//I do not own the image or the video used in this example, both belong to their respected owners and are being used purely as tests // var videos=[ ‘http://clips.vorwaerts-gmbh.de/VfE_html5.mp4’,”http://www.okcareertech.org/cac/images/Video_Icon.jpg”, ‘http://clips.vorwaerts-gmbh.de/VfE_html5.mp4’,”http://www.okcareertech.org/cac/images/Video_Icon.jpg”, ‘http://clips.vorwaerts-gmbh.de/VfE_html5.mp4’,”http://www.okcareertech.org/cac/images/Video_Icon.jpg”, ‘http://clips.vorwaerts-gmbh.de/VfE_html5.mp4’,”http://www.okcareertech.org/cac/images/Video_Icon.jpg”, ‘http://clips.vorwaerts-gmbh.de/VfE_html5.mp4’,”http://www.okcareertech.org/cac/images/Video_Icon.jpg”, ‘http://clips.vorwaerts-gmbh.de/VfE_html5.mp4’,”http://www.okcareertech.org/cac/images/Video_Icon.jpg”, ‘http://clips.vorwaerts-gmbh.de/VfE_html5.mp4’,”http://www.okcareertech.org/cac/images/Video_Icon.jpg”, ‘http://clips.vorwaerts-gmbh.de/VfE_html5.mp4’,”http://www.okcareertech.org/cac/images/Video_Icon.jpg”,

]; var videoHTML=[]; var rownumber=4; var div_elm = document.getElementById(“video_container”); for(var i=1;i<videos.length;i+=2) { videoHTML.push(“<image onclick=’showpreview(‘”+ videos[i-1] + “‘ src='” + videos[i] + “‘</image>”); rownumber–; if(rownumber == 0) { videoHTML.push(“<br><hr><hr>”); rownumber = 4; } div_elm.innerHTML = videoHTML.join(” “); var video_nodes = div_elm.getElementsByTagName(“img”); for(var num=0;num<video_nodes.length;num++) { video_nodes[num].style.width=(98/rownumber) + “%”; video_nodes[num].style.height=”200px”; } }; }

function showpreview(number) { var previewelm = document.getElementById(“video_container”); previewelm.innerHTML = “<video width=’320′ height=’240’ controls><source src='” + number + “‘ type=’video/mp4’></video>” alert(number) }

</script> </body>[/CODE]

I am getting the common Uncaught SyntaxError: Unexpected token } error, the problem is I’m not sure as to why ….
Line 29 and possible the showpreview(number) function as the possible courses that are doing is as I think it is happening when I pass the string to the function.
I have tried to get around this area of “errors” by passing the videos variable (such as videos~~[i]~~) itself but this seems to course completely irrelevant errors so i’m lost.

Any help would be great,

Thanks

to post a comment

JavaScript

2 Comments(s) _↴

@B_vidlerauthorDec 08.2013 — #Hi all,

I got round to fixing this today. There was rather a lot of errors in my code, dodgy html with <img> </img> tags, bad quoting and god knowns what else but all in all this script just didn't work sadly.

Even with many fixes the code would still not give the correct outcome with the string passed to the created img being broken up like (http: text . mp 4) and crazy things like this. I made an alert to show me what the variables were just before being made into a <img> tag and they were all correct yet as soon as they were put into the <img> tag the code just messed up.

Anyway I remade the code, and ended up with the following with a bit of css to get a feel of what I was trying to accomplish:

[CODE]
 <!DOCTYPE HTML>
 <html>
 <head>
 <style>
 #videobox
 {
 position:absolute;
 left:50%;
 top:30%;
 margin-left:-400px;
 margin-top:-200px;
 min-height:400px;
 min-width:800px;
 display:none;
 z-index:2;
 }
 
 #vidbackground
 {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 min-width:100%;
 min-height:100%;
 background-color:grey;
 opacity:0.8;
 display:none;
 z-index:1;
 }
 </style>
 </head>
 <body onload="showvideosnew()">
 <div id="video_container" style="width:100%">
 </div>
 <div id="videobox">
 </div>
 <div id="vidbackground">
 </div>
 
 <script type="text/javascript">
 
 //I do not own the image or the video used in this example, both belong to their respected owners and are being used purely as tests // 
 var videos=[
 "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4","http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://haignet.co.uk/html5-video-element-test.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://haignet.co.uk/html5-video-element-test.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4","http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://haignet.co.uk/html5-video-element-test.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 'http://haignet.co.uk/html5-video-element-test.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
 ];
 
 function showpreview(number)
 {
 var background = document.getElementById("vidbackground");
 var previewelm = document.getElementById("videobox");
 previewelm.innerHTML = "<video width='100%' height='100%' controls><source src=" + number + " type='video/mp4'></video>"
 previewelm.style.display="block";
 background.style.display="block";
 }
 
 
 function showvideosnew()
 {
 var rownumber=5;
 var newelm =[];
 var div_elm = document.getElementById("video_container");
 for(var i=0;i<videos.length;i+=2)
 {
 var videourl = videos[i]
 var videosrc = videos[i+1]
 newelm[i] = document.createElement('IMG');
 newelm[i].setAttribute("onClick","showpreview('" + videourl + "')");
 newelm[i].src = videosrc;
 div_elm.appendChild(newelm[i]);
 }
 var video_nodes = div_elm.getElementsByTagName("IMG");
 for(var num=0;num<video_nodes.length;num++)
 {
 video_nodes[num].style.width=(98/rownumber) + "%";
 video_nodes[num].style.height="300px";
 }; 
 }
 </script>
 </body>[/CODE]

@bionoidDec 09.2013 — #Even though you've managed to fix the problems, this is another way your images etc could be generated:

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;style type="text/css"&gt;
 
 <i>	</i>		#videobox
 <i>	</i>		{
 <i>	</i>			position:absolute;
 <i>	</i>			left:50%;
 <i>	</i>			top:30%;
 <i>	</i>			margin-left:-400px;
 <i>	</i>			margin-top:-200px;
 <i>	</i>			min-height:400px;
 <i>	</i>			min-width:800px;
 <i>	</i>			display:none;
 <i>	</i>			z-index:2;
 <i>	</i>		}
 
 <i>	</i>		#vidbackground
 <i>	</i>		{
 <i>	</i>			position: absolute;
 <i>	</i>			top: 0;
 <i>	</i>			left: 0;
 <i>	</i>			right: 0;
 <i>	</i>			bottom: 0;
 <i>	</i>			background-color:gray;
 <i>	</i>			opacity:0.8;
 <i>	</i>			display: none;
 <i>	</i>			z-index: 1;
 <i>	</i>		}
 
 <i>	</i>	&lt;/style&gt;
 <i>	</i>&lt;/head&gt;
 <i>	</i>&lt;body onload="showvideosnew();"&gt;
 
 <i>	</i>	&lt;div id="video_container"&gt;&lt;/div&gt;
 <i>	</i>	&lt;div id="videobox"&gt;&lt;/div&gt;
 <i>	</i>	&lt;div id="vidbackground"&gt;&lt;/div&gt;
 
 <i>	</i>	&lt;script type="text/javascript"&gt;
 
 <i>	</i>	//I do not own the image or the video used in this example, both belong to their respected owners and are being used purely as tests //
 <i>	</i>	var videos= [
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://haignet.co.uk/html5-video-element-test.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://haignet.co.uk/html5-video-element-test.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://haignet.co.uk/html5-video-element-test.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
 <i>	</i>		'http://haignet.co.uk/html5-video-element-test.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg'
 <i>	</i>	];
 
 <i>	</i>	function showpreview(number)
 <i>	</i>	{
 <i>	</i>		var
 <i>	</i>			background = document.getElementById('vidbackground'),
 <i>	</i>			previewelm = document.getElementById('videobox');
 
 <i>	</i>		previewelm.innerHTML     = '&lt;video width="100%" height="100%" controls&gt;&lt;source src="' + number + '" type="video/mp4"&gt;&lt;/video&gt;';
 <i>	</i>		previewelm.style.display = 'block';
 <i>	</i>		background.style.display = 'block';
 
 <i>	</i>		background.onclick = function()
 <i>	</i>		{
 <i>	</i>			previewelm.innerHTML     = '';
 <i>	</i>			previewelm.style.display = 'none';
 <i>	</i>			background.style.display = 'none';
 <i>	</i>		};
 <i>	</i>	}
 
 
 <i>	</i>	function showvideosnew()
 <i>	</i>	{
 <i>	</i>		var
 <i>	</i>			div_elm = document.getElementById('video_container'),
 <i>	</i>			i, e;
 
 <i>	</i>		function videoClick(url)
 <i>	</i>		{
 <i>	</i>			return function() {showpreview(url);};
 <i>	</i>		}
 <i>	</i>		for (i = 0; i &lt; videos.length; i += 2) {
 <i>	</i>			e              = div_elm.appendChild(document.createElement('img'));
 <i>	</i>			e.src          = videos[i + 1];
 <i>	</i>			e.style.width  = (98 / 5).toFixed(2) + '%';
 <i>	</i>			e.style.height = '300px';
 <i>	</i>			e.onclick      = videoClick(videos[i]);
 <i>	</i>		}
 <i>	</i>	}
 
 <i>	</i>	&lt;/script&gt;
 <i>	</i>&lt;/body&gt;
 &lt;/html&gt;

I also added an onclick for the videos background to close the currently playing video ?

Oh, and just to be clear the movies seem to start up ok, but the thumbnail images don't seem to be valid.

Also in #JavaScript _↴

char counter and alphanumeric validator Performing text with visible text instead of value TinyMCE plugin - spurious formatting - how do I stop it?

Success!

Help @B_vidler spread the word by sharing this article on Twitter...

Tweet This

Uncaught SyntaxError: Unexpected token }

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Uncaught SyntaxError: Unexpected token }

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴