PDA

View Full Version : Javascript Show/Hide <div> Error (document.getElementById(id) has no properties)



schone
Mar 2nd, 2007, 10:18 AM
Hi All

I seem to be pulling this error both with FireFox & IE 7, I have searched google but to avail!

Error Code


Error: document.getElementById(id) has no properties
Line: 6


Javascript Code


function show( id ) {
document.getElementById(id).style.display = 'block';
}
function hide( id ) {
document.getElementById(id).style.display = 'none';
}


HTML Code


<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#F5F5F5"><img src="library/images/header.jpg" width="800" height="100" /></td>
</tr>
<tr>
<td height="25" colspan="2" class="largenav"><a href="index2.php" onmouseover="hide('01');hide('02');hide('03');hide('04');hide('05');">Home</a> <a href="#" onmouseover="hide('01');show('02');hide('03');hide('04');hide('05');">Manage</a> <a href="#" onmouseover="hide('01');hide('02');show('03');hide('04');hide('05');">Reports</a> <a href="#" onmouseover="hide('01');hide('02');hide('03');show('04');hide('05');">Alerts</a></td>
</tr>
<tr>
<td width="500" valign="middle" bgcolor="#F5F5F5" class="submenu"><div id="01" style="display:none">Home</div>
<div id="02" style="display:none;"><a href="alert.php">Alerts</a> <a href="attend.php">Attendance</a> <a href="cal.php">Calendar</a> <a href="player.php">Players</a> <a href="question.php">Questions</a> <a href="comp.php">Compliance</a></div>
<div id="03" style="display:none"><a href="rplayers.php">Players</a> <a href="rages.php">Age</a> <a href="position.php">Position</a> <a href="rcompliance.php">Compliance</a> </div><div id="04" style="display:none"><a href="major_ralerts.php">Major</a> <a href="latest_ralerts.php">Latest</a>&nbsp;<?php view_current_alert_num() ?> <a href="past_ralerts.php">History</a></div></td>
<td width="300" height="21" bgcolor="#F5F5F5" class="sml_nav"><div align="right" class="smlnav">Welcome <strong><?php echo $_SESSION['adminfirstname']." ".$_SESSION['adminlastname'];?></strong> | <?php echo date('D dS \of M y') ?> | <a href="logout.php">Logout</a> </div>
</div></td>
</tr>
</table>



If someone could help it would amazing!
Thanks in advance all! :thumbsup:

vwphillips
Mar 2nd, 2007, 10:24 AM
ID names must start with Alpha character or $

Welcome:)

schone
Mar 2nd, 2007, 10:14 PM
Hi vmphillips

I still get the error even when I rename my div's too a1 a2 ... etc

Html Code


<?php
include 'library/functions/func_index.php';
?>
<link href="../css/global.css" rel="stylesheet" type="text/css">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#F5F5F5"><img src="library/images/header.jpg" width="800" height="100" /></td>
</tr>
<tr>
<td height="25" colspan="2" class="largenav"><a href="index2.php" onmouseover="hide('a1');hide('a2');hide('a3');hide('a4');hide('a5');">Home</a> <a href="#" onmouseover="hide('a1');show('a2');hide('a3');hide('a4');hide('a5');">Manage</a> <a href="#" onmouseover="hide('a1');hide('a2');show('a3');hide('a4');hide('a5');">Reports</a> <a href="#" onmouseover="hide('a1');hide('a2');hide('a3');show('a4');hide('a5');">Alerts</a></td>
</tr>
<tr>
<td width="500" valign="middle" bgcolor="#F5F5F5" class="submenu"><div id="a1" style="display:none">Home</div>
<div id="a2" style="display:none;"><a href="alert.php">Alerts</a> <a href="attend.php">Attendance</a> <a href="cal.php">Calendar</a> <a href="player.php">Players</a> <a href="question.php">Questions</a> <a href="comp.php">Compliance</a></div>
<div id="03" style="display:none"><a href="rplayers.php">Players</a> <a href="rages.php">Age</a> <a href="position.php">Position</a> <a href="rcompliance.php">Compliance</a> </div><div id="a4" style="display:none"><a href="major_ralerts.php">Major</a> <a href="latest_ralerts.php">Latest</a>&nbsp;<?php view_current_alert_num() ?> <a href="past_ralerts.php">History</a></div></td>
<td width="300" height="21" bgcolor="#F5F5F5" class="sml_nav"><div align="right" class="smlnav">Welcome <strong><?php echo $_SESSION['adminfirstname']." ".$_SESSION['adminlastname'];?></strong> | <?php echo date('D dS \of M y') ?> | <a href="logout.php">Logout</a> </div>
</div></td>
</tr>
</table>

vwphillips
Mar 2nd, 2007, 10:28 PM
<div id="03" style="display:none"><a hr

schone
Mar 4th, 2007, 06:47 AM
Thanks mate :cool:

Mr J
Mar 4th, 2007, 08:49 AM
To save having all those calls to function hide you could go something like this



<script type="text/javascript">

function showHide(id) {

count=1
while(document.getElementById("a"+count)){
document.getElementById(("a"+count)).style.display = 'none'
count++
}

if(id){
alert(id)
document.getElementById(id).style.display = 'block';
}

}

</script>

Your links would then be


<a href="index2.php" onmouseover="showHide()">Home</a>
<a href="#" onmouseover="showHide('a2');">Manage</a>
<a href="#" onmouseover="showHide('a3')">Reports</a>
<a href="#" onmouseover="showHide('a4')">Alerts</a>