why won't this toggle (style.display)
Question
I am wondering why i am getting "display is undefined" when it comes to this code right here. Here is a mock up of the part of my page that i am talking about. I have the javascript in the header and the html within a PHP echo.
<?php
error_reporting(E_ALL ^ E_NOTICE);
session_start();
$userid = $_SESSION['userid'];
$username = $_SESSION['username'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function display(id) {
var e = document.getElementById(id);
alert(e.style.display);
if (e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
}
</script>
</head>
<body>
<?php
if ($username && $userid) {
echo "<a href=\"javascript: display('menuLinksAdmin');\">MenuLinks</a>
<div id='menuLinksAdmin' style='display: none;'>
<form action='insert.php' method='post'>
linktitle: <input type='text' name='linktitle' />
linkdescription: <input type='text' name='linkdescription' />
<input type='submit' />
</form>
</div>";
}
else
echo 'somethin up homie';
?>
3 answers
solution1
1 2012-11-13 23:37:37
Updated
This issue seems to be related to be scope related. jsfiddle is wrapping the script code in a mootols onload event by default which messes up the call to the display function.
When selected "no wrap (head"), it works fine.
solution2
0 2012-11-13 23:43:14
You code worked for me as tested here: http://jsfiddle.net/pu3wQ/1/
<a id='menuLinks' href="javascript:display('menuLinksAdmin');">MenuLinks</a>
<div id='menuLinksAdmin' style='display:none;'>
<form action='insert.php' method='post'>
linktitle: <input type='text' name='linktitle' />
linkdescription: <input type='text' name='linkdescription' />
<input type='submit' />
</form>
</div>
<script>
function display(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
}
</script>
I think your issue is with scoping. Try having the JS code on the head part of the HTML file and put the mark up in the body.
If you are comfortable with jQuery here is the version that works like you expect. http://jsfiddle.net/pu3wQ/8/
Here is a much shorter version with jQuery: http://jsfiddle.net/pu3wQ/11/
solution3
0 2012-11-13 23:50:25
I would change the name of the function to be more descriptive of what it does. Also, check that you get an element before trying to do something with it. And when toggling the display property, you are much better to toggle between "none" and "" (see below):
function toggleDisplay(id) {
var element = document.getElementById(id);
// Only proceed if an element was found
if (element && element.style) {
if (element.style.display == 'none') {
element.style.display = ''; // empty string
} else {
element.style.display = 'none';
}
}
}
Setting display to '' allows it to return to its default (or whatever value it might inherit or be set to by CSS), which may not be block. Also, if the property hasn't been explicitly set, it will be '' even if the computed value is 'block' (or inline-block or table or inline-table or one of the other many values).
The above can be shortened to:
element.style.display = element.style.display == 'none'? '' : 'none';
Also, don't use an A element and fake href when some other element (like a button or styled span) is better for the job. A elements have default behaviour that makes them unsuitable.
Lastly, I would change the name of the function so it's more aligned with what the function actually does, so:
<span id='menuLinks' onclick="toggleDisplay('menuLinksAdmin');">MenuLinks</span>
Then add CSS to style the span the way you want, maybe:
#menuLinks {
cursor: pointer;
text-decoration: underline;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.