Javascript variables and onclick

Hey fellas, i’m having a hard time with some functions and I’ve finally humbled myself to asking because I cant seem to find anything on google…

Here are two functions: one to show, the other to hide the menu elements.

function hide(id) {
	alert("hide function");
	var d = document.getElementById(id);


function show(id) {

	var d = document.getElementById(id);
	var o = document.getElementById("c" + id);
	o.setAttribute( "onclick", "javascript:hide('id');" );

<dt onclick="javascript:show('4');" id="c4">Forth Menu Item</dt>
<dd id="4">
<li><a href='#'>Home</a></li>
<li><a href='#'>Why partner with First Horizon Msaver?</a></li>
<li><a href='#'>Speaking Engagements</a></li>	

This menu is loaded with the DT element onclick attribute set to show(‘4’).
When I run show(), I am wanting to add a c to the id to select the DT element and change the onclick attribute to “javascript:hide(‘4’);”
I’m really “hiding” the dd element.

I’m running into all kinds of variable problems, mainly when I get to the hide(id), it is the c+id variable (ie: hide(‘c4’) instead of hide(‘4’)

I’ve put alerts all in the show() function but can not figure out how id becomes c+id when delclaring:

	o.setAttribute( "onclick", "javascript:hide('id');" );

Any input on what’s happening would be great!

(first time posting, hopefully i have code in legible format!)

IDs may not start with a number.

Common JavaScript Mistakes

1)Looking at your code, it’s apparent that you don’t what this does:


Remove it.

2)setAttribute() does not work cross browser for setting events. The way you set events is more straightforward:

o.onclick = …;

3)Your code doesn’t work for me in IE6. hide() is never called when I click on the element a second time, so I can’t see the id changing from “4” to “c4”.

Even though changing an html element’s event property is straightforward:

o.onclick = …;

you are required to assign a function reference to the onclick property. But, a function reference looks like this:

o.onclick = myFunc;

A function reference, like myFunc, does not allow you to specify a function parameter. But, you can also assign a function reference like this:

o.onclick = function(){ alert(“hello”);};

On the right side of the equals sign is an anonymous function with no name, and a reference to it is being assigned to onclick. So, with a little trickery, you can use that format to your advantage:

o.onclick = function(){hide(id);};

There the onclick property is assigned a function reference, which in this case is a reference to an anonymous function with no name, and in turn that function calls hide() with the specified argument. So, when you click on the html element, the anonymous function is executed, and when the anonymous function executes, it causes hide() to execute. See if you can get that to work.