Function doesnt work on explorer but work on other browsers why?

JavaScript
1

Hi i have the following function that display a list depending on the drop down option the user selects but doesnt not work on explorer it works on other browsers but on exploere i get the following error
SCRIPT600: Unknown runtime error
manitest.html, line 76 character 3
on this line
document.getElementById(‘rep’).innerHTML=lit

you can see the page live on
Manning Stainton - Estate & Letting Agents Leeds, Wakefield

<SCRIPT TYPE="TEXT/JAVASCRIPT"> 
function setup(ans) {
  lit = ''
  if (ans == 'Property') { 
  
lit = lit + '<tr><td  class="fodas" cellspacing="0"><a href="#" onClick="jwplayer().load({\\'file\\': \\'videosdemo/hofmann30735.mp4\\', \\'hd.file\\': \\'videosdemo/hofmann30735hd.mp4\\'})"><img class="images_playlist" src="house_images/hofmann30735tmbleft_new.jpg"  alt="house" /></a></td></td></tr>'

lit = lit + '<tr><td  class="fodas" cellspacing="0"><a href="#" onClick="jwplayer().load({\\'file\\': \\'videosdemo/hofmann30735.mp4\\', \\'hd.file\\': \\'videosdemo/hofmann30735hd.mp4\\'})"><img class="images_playlist" src="house_images/hofmann30735tmbleft_new.jpg"  alt="house" /></a></td></td></tr>'
  }
  
  if (ans == 'Location') {
lit = lit + '<tr><td  class="fodas" cellspacing="0"><a href="#" onClick="jwplayer().load({\\'file\\': \\'videosdemo/hofmorpeth.mp4\\', \\'hd.file\\': \\'videosdemo/hofmorpethhd.mp4\\'})"><img class="images_playlist" src="house_images/hofmorpethtmbleft_new.jpg"  alt="house" /></a></td></td></tr>'

lit = lit + '<tr><td  class="fodas" cellspacing="0"><a href="#" onClick="jwplayer().load({\\'file\\': \\'videosdemo/hofmorpeth.mp4\\', \\'hd.file\\': \\'videosdemo/hofmorpethhd.mp4\\'})"><img class="images_playlist" src="house_images/hofmorpethtmbleft_new.jpg"  alt="house" /></a></td></td></tr>'

  }
  
   if (ans == 'News') {
	   
lit = lit + '<tr><td  class="fodas" cellspacing="0"><a href="#" onClick="jwplayer().load({\\'file\\': \\'videosdemo/videoblog.mp4\\', \\'hd.file\\': \\'videosdemo/videobloghd.mp4\\'})"><img class="images_playlist" src="house_images/videoblogtmb_new.jpg"  alt="house" /></a></td></td></tr>'

lit = lit + '<tr><td  class="fodas" cellspacing="0"><a href="#" onClick="jwplayer().load({\\'file\\': \\'videosdemo/videoblog.mp4\\', \\'hd.file\\': \\'videosdemo/videobloghd.mp4\\'})"><img class="images_playlist" src="house_images/videoblogtmb_new.jpg"  alt="house" /></a></td></td></tr>'
	   
   }
   
  
  document.getElementById('rep').innerHTML=lit
  
}


<div class="module sub_menu_obj " id="modulede2c191b487ea7c167b924a5d5d34e38" style="">

<FORM ACTION="#" NAME="quest" style="float:right" />
<SELECT NAME="q1" ONCHANGE="setup(document.quest.q1.value)">
<OPTION VALUE="">Select Video...</OPTION>
<OPTION VALUE="Property">Property videos</OPTION>
<OPTION VALUE="Location">Location videos</OPTION>
<OPTION VALUE="News">News on video</OPTION>
</SELECT>
 </FORM><!-- end menu -->


<table id="rep" class="table_manning"  cellspacing="0" cellpadding="0">

</table>
</SCRIPT>
2

Apparently Microsoft say that the error occurs by design. They have some solutions here:
Error Setting table.innerHTML in Internet Explorer

3

this line has no tables tag in it so i really cnt seem to understand how that link can help me
document.getElementById(‘rep’).innerHTML=lit

one think that i suspect is that maybe are the above tables tags that causing

lit = lit + '<tr><td  class="fodas" cellspacing="0"><a href="#" onClick="jwplayer().load({\\'file\\': \\'videosdemo/videoblog.mp4\\', \\'hd.file\\': \\'videosdemo/videobloghd.mp4\\'})"><img class="images_playlist" src="house_images/videoblogtmb_new.jpg"  alt="house" /></a></td></td></tr>'
4

The content is being added to a table, the one with an id of “rep”
Microsoft doesn’t allow you to add innerHTML content to entire tables, but only cells.

My suggestion is that you use createElement and appendChild to create the elements that you need, append them to a tbody element, empty the table and add that tbody element to the table.

You won’t find it as easy as using innerHTML, but the alternative is only to drop support for Internet Explorer, and you really don’t want to do that.

5

so if i change to div
<div id=“rep”></div>

can do i need to change this by adding a table tag

lit = lit + '<tr><td  class="fodas" cellspacing="0"><a href="#" onClick="jwplayer().load({\\'file\\': \\'videosdemo/hofmorpeth.mp4\\', \\'hd.file\\': \\'videosdemo/hofmorpethhd.mp4\\'})"><img class="images_playlist"  src="house_images/hofmorpethtmbleft_new.jpg"  alt="house" /></a></td></td></tr>'

so it would be

lit = lit + '<table><tr><td  class="fodas" cellspacing="0"><a href="#" onClick="jwplayer().load({\\'file\\': \\'videosdemo/hofmorpeth.mp4\\', \\'hd.file\\': \\'videosdemo/hofmorpethhd.mp4\\'})"><img class="images_playlist"  src="house_images/hofmorpethtmbleft_new.jpg"  alt="house" /></a></td></td></tr></table>'
6

Does it work?

7

if i have it like this
<div id=“rep”></div>
and remove the tables or cells completly like this it works

lit = lit + '<a href="#" onClick="jwplayer().load({\\'file\\': \\'videosdemo/hofmorpeth.mp4\\', \\'hd.file\\': \\'videosdemo/hofmorpethhd.mp4\\'})"><img class="images_playlist"  src="house_images/hofmorpethtmbleft_new.jpg"  alt="house" /></a>'

will i need to change <tables to div aswell because if i want to design the layout it seems easier with the tables thats why i used tables as without every field will just be unordered

8

Do you want to go back to the idea of recreating your original HTML layout using DOM element creation techniques instead of innerHTML?

9

i dnt understand what do u mean by changing from DOM or innerHTML?
can you elaborate more sorry i’m new to this

10

Using the tr and td as an example:

The HTML code for it is:


<tr><td  class="fodas" cellspacing="0">...</td></tr>

Which is created using DOM (Document Object Model) elements with:


var tr = document.createElement('tr');
var td = document.createElement('td');
td.className = 'fodas';
td.cellspacing = 0;

tr.appendChild(td);

Due to the vast amount of repetition in your existing code, it would be wise for you to remove that duplication by using a single function to provide the content. That way you will have much less HTML code that needs to be converted.

11

Thanks i dont quite understand how the DOM table works within my script but i will be reading more about this DOM.
Thanks once again