The “showMenu” function seems to be expecting an object (such a reference to a div tag) to be passed in as a parameter (note the use of “this” as the parameter in the other mouse events. “this” is an object variable pointing to the element that raised the event). The error is occurring because there’s no object defined with the name “WoodMenuDiv”.
In order for this to work you need to be able to get hold of the object that represents the div tag. You can do this like this:
Now, the problem here is that “document.all” is IE specific and is not a ratified standard (even though it is a sort of de-facto one by virtue of working on ninety-something percent of browsers). It won’t work on the Mozilla derived browsers or Opera(?).
If you need the cross-browser compatability it’s fairly easy to build in, but I don’t want to complicate matters if you’re just trying stuff out. If you want me to go into the compatability stuff then post a follow up and I’ll sort out some functions for you.
This seems to work in newer browsers, anyway. I don’t know what you mean by building in cross-browser compatibility, but if you’re suggesting code that looks something like this:
The div tag creates the object, but you can’t reference it by its id alone. This is true of any tag-generated object, not just divs. You have to use a method to refer to it. If you like, in your code, you can say something like:
Y’know, I would’ve sworn document.getElementById didn’t work in IE. But there it is, right there in the documentation and featuring prominently in a load of code I wrote just a few months ago. Some days you just ain’t firing on all cylinders.
Well I’m not sure what you’re trying to achieve, but hopefully this will help.
On function “toggleText” you’ll see two methods for identifying which object you’re referring, they are “window[oDiv]” and “document.getElementById(oDiv)”…they both work in IE, but I cannot speak for any other environment…good luck.
<script language="JavaScript">
function toggleText(oDiv) {
var sMsg = (window[oDiv].innerText == "Old message") ? "New message" : "Old message";
document.getElementById(oDiv).innerText = sMsg;
}
function expandMenu(oDiv) {
var submenu = window[oDiv].style;
submenu.display = (submenu.display=="none") ? "" : "none";
}
</script>
<button onClick="expandMenu('WoodMenuDiv');">Show / Hide</button>
<div>
<span id="WoodMenuDiv">Old message</span>
</div>
<button onClick="toggleText('WoodMenuDiv');">Toggle</button>
