Forum Moderators: open
<body onload="showdiv(0);">
Running on firefox works fine, the first div is showing onload BUT testing on IE doesn't work at all. It displays an error:
document.getElementById()is null or not an object
here's the jscript i'm using:
<script type="text/javascript">
var c;
var k=0;
var j=0;
var ary=[];
var divs=document.getElementsByTagName('div');
var lnks=document.getElementsByTagName('a');
var splt;
function init() {
for(c=0;c<divs.length;c++) {
if(divs[c].className=='show') {
divs[c].className='hide';
divs[c].id='d'+k++;
}
}
for(c=0;c<lnks.length;c++) {
if(lnks[c].className=='hide') {
ary[c]=true;
lnks[c].className='hs';
lnks[c].id='a'+j++;
lnks[c].onclick=function() {
splt=this.id.split('a')[1];
if(ary[splt]==true) {
this.firstChild.nodeValue='hide '+(parseFloat(splt)+1);
ary[splt]=false;
showdiv(splt);
return false;
}
else {
this.firstChild.nodeValue='show '+(parseFloat(splt)+1);
ary[splt]=true;
document.getElementById('d'+splt).className='hide';
return false;
}
}
}
}
}
function showdiv(num) {
for(c=0;c<j;c++){
document.getElementById('a'+c).firstChild.nodeValue='show '+(c+1);
document.getElementById('a'+num).firstChild.nodeValue='hide '+(parseFloat(num)+1);
ary[c]=true;
ary[num]=false;
}
for(c=0;c<divs.length;c++) {
if(divs[c].className=='show') {
divs[c].className='hide';
}
}
document.getElementById('d'+num).className='show';<--- this is the line error
}
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>
How will i solve this issue? So frustrating...
Hope someone can take a peek on my codes.
and a warm welcome to these forums. ;)
That script looks very familiar to me, well, it ought to as I wrote it. :)
This is how I would amend it to meet your needs...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title>show and hide divs</title>
<style type="text/css">
#links {
width:755px;
height:40px;
margin:40px auto 0;
padding:0;
border:2px solid #210706;
border-right:1px solid #210706;
list-style-type:none;
}
#links li {
float:left;
border-right:1px solid #210706;
}
#links a {
width:150px;
line-height:40px;
display:block;
background-image:url(http://www.coothead.co.uk/images/red_button.jpg);
font-family:arial,verdana,helvetica,sans-serif;
font-size:16px;
font-weight:bold;
color:#fff;
letter-spacing:2px;
text-decoration:none;
text-align:center;
}
#links a:hover {
background-position:-150px 0;
}.hs {
color:#000;
}
.show {
line-height:25px;
text-align:center;
border:1px dotted #ccc;
margin-top:10px;
}
.hide {
display:none;
}
#d0,#d2,#d4 {
border-color:#900;
}
#d1,#d3 {
border-color:#090;
}
</style><script type="text/javascript">
var c;
var k=0;
var j=0;
var ary=[];
var divs=document.getElementsByTagName('div');
var lnks=document.getElementsByTagName('a');
var splt;/**************************************************
function init is provided for those who have javascript disabled
and would, otherwise, not be able to view any of the divs at all.
They would also I presume not need the links that control the divs
so that will not show up.***************************************************/
function init() {
for(c=0;c<divs.length;c++) {
if(divs[c].className=='show') {
divs[c].className='hide';
divs[c].id='d'+k++;
}
}
for(c=0;c<lnks.length;c++) {
if(lnks[c].className=='hide') {
ary[c]=true;
lnks[c].className='hs';
lnks[c].id='a'+j++;
lnks[c].onclick=function() {
splt=this.id.split('a')[1];
if(ary[splt]==true) {
this.firstChild.nodeValue='hide '+(parseFloat(splt)+1);
[blue]
if((splt==0)&&(test==true)){
document.getElementById('d0').className='hide';
document.getElementById('a0').firstChild.nodeValue='show 1';
test=false;
return;
}
else{
test=false;
}
[/blue]
ary[splt]=false;
showDiv(splt);
return false;
}
else {
this.firstChild.nodeValue='show '+(parseFloat(splt)+1);
ary[splt]=true;document.getElementById('d'+splt).className='hide';
return false;
}
}
}
}
[blue]
document.getElementById('d0').className='show';
document.getElementById('a0').firstChild.nodeValue='hide 1';
test=true;
[/blue]
}function showDiv(num) {
for(c=0;c<j;c++){
document.getElementById('a'+c).firstChild.nodeValue='show '+(c+1);
document.getElementById('a'+num).firstChild.nodeValue='hide '+(parseFloat(num)+1);
ary[c]=true;
ary[num]=false;
}
for(c=0;c<divs.length;c++) {
if(divs[c].className=='show') {
divs[c].className='hide';
}
}
document.getElementById('d'+num).className='show';}
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}</script>
</head>
<body><ul id="links">
<li><a class="hide" href="#">show 1</a></li>
<li><a class="hide" href="#">show 2</a></li>
<li><a class="hide" href="#">show 3</a></li>
<li><a class="hide" href="#">show 4</a></li>
<li><a class="hide" href="#">show 5</a></li>
</ul><div class="show">This is div one</div>
<div class="show">This is div two</div>
<div class="show">This is div three</div>
<div class="show">This is div four</div>
<div class="show">This is div five</div></body>
</html>
Anyways, I did replaced the jscript codes with the one you posted, good thing is that 1st div shows up for BOTH; firefox & IE, BUT when I click my buttons/links, other div won't show up.
How is this? Is there inconsistency issues if I did not use the same CSS as to your post? Or there's another glitch with my code?
I have other jscripts on my code, will this cause a problem?
Sorry for having too much questions, I'm new to jscripts still learning. =)
This is the code for my TEXT buttons:
<div align="left">
<span class="style65">Menu</span><br />
<span class="style67"><a href="#" onclick="showdiv(0);">Submenu1</a></span><br />
<span class="style67"><a href="#" onclick="showdiv(1);">Submenu2</a></span><br />
<span class="style67"><a href="#" onclick="showdiv(2);">Submenu3</a></span><br /></div>
and here's for the div layers:
<div class="show">This is div one</div>
<div class="show">This is div two</div>
<div class="show">This is div three</div>
I used these codes with the jscript you gave.
:(
it so happened that i'm calling showdiv() but the function is showDiv(). =D
Problem solved. Thanks birdbrain! =)
