External Reference of a Javascript file in IE

Question

I am working on a website for a teacher, Since there is a chance she may want to add more later, I decided to make the links that appear on every page be written in by Javascript so that all the pages could be changed quickly.

The HTML code has this for the external reference:

<script type="text/javascript" language="javascript" src="links.js"></script>

The Javascript looks like this:

document.write(<div id="wrapper">
<div id="header">
<ul>
<li><a href="home.html">Home </a></li>
<li><a href="catering-home.html">Catering </a></li>
<li><a href="prostart-home.html">ProStart </a></li>
<li><a href="recipes.html">Recipes</a></li>
</ul>
</div>
</div>)

This loads perfectly in firefox, but the part of the page written in by javascript does not load in IE. is it how the code is written or the reference that is preventing IE from loading it?

Answer 1

You would need quotes around it like this:

document.write('<div id="wrapper">'+
'<div id="header">'+
'<ul>'+
'<li><a href="home.html">Home </a></li>' +
'<li><a href="catering-home.html">Catering </a></li>' +
'<li><a href="prostart-home.html">ProStart </a></li>' +
'<li><a href="recipes.html">Recipes</a></li>' +
'</ul>' +
'</div>' +
'</div>');

However, it would be a lot cleaner if it was just output in the HTML file. I guess if the Javascript is coming from an external domain under the teacher's control, that's one reason to do it this way.

Answer 2

Your quotes are not correctly escaped. Try like this:

document.write("<div id=\"wrapper\"><div id=\"header\"><ul><li><a href=\"home.html\">Home </a></li><li><a href=\"catering-home.html\">Catering </a></li><li><a href=\"prostart-home.html\">ProStart </a></li><li><a href=\"recipes.html\">Recipes</a></li></ul></div></div>");

Answer 3

Put the links in a separate HTML file and include it on all pages. All major web servers support this. For example:

• If you have PHP, it'd could be <?php include('links.html'); ?> <?php include('links.html'); ?>
• If you have Apache, it could be <!--#include virtual="/links.html" -->

Answer 4

I'd suggest making array for the links that you maintain, and then it can be placed into a function like:

var links=[
   ['home.html','Home'],
   ['catering-home.html','Catering'],
   ['prostart-home.html','Prostart'],
   ['recipes.html','Recipes']
  ];

document.write('<div id="wrapper">
<div id="header">;
 <ul>');
  var items=links.length;
  for(var i=0;i<items;i++){
    document.write('<li><a href="'+links[i][0]+'">'+links[i][1]+'</a></li>');
    }
document.write('</ul>
</div>
</div>');

This would make more sense in server side code like PHP than Javascript, really, and the approach would be about the same. This style is a good step towards making a site that reads the items from a database and then print them out with a function like so.