If you’re using templates in your project, you may want to use one template more than once. But what if you want to show some elements in one programme and hide these elements in second one. You constantly, write your ordinary two line of javascript code in the head of your html code. That’s where the problem occurs.
For example, you write the code below and run it in your browser,
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=windows-1250″>
<title></title>
<script>
var e = document.getElementById(’mydiv’);
e.style.display = ‘none’;
</script>
</head>
<body>
<div id=”mydiv”>
Hello, How are you today?
</div>
</body>
</html>
Then you will get an javascript error: e is null. Because you can’t change the style of an element with javascript before the element is loaded in your page. But if you’re stubborn like me, you can write your javascript code end of your page.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=windows-1250″>
<title></title>
</head>
<body>
<div id=”mydiv”>
Hello, How are you today?
</div>
</body>
</html>
<script>
var e = document.getElementById(’mydiv’);
e.style.display = ‘none’;
</script>
I tested the code above, in IE6 and FF.