SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code:
    function hide(id) {
    	alert("hide function");
    	alert(id);
    	var d = document.getElementById(id);
    	alert(d);
    	document.getElementById(id).style.display='none';
    
    }
    
    function show(id) {
    
    	var d = document.getElementById(id);
    	document.getElementById(id).style.display='block';
    	var o = document.getElementById("c" + id);
    	o.setAttribute( "onclick", "javascript:hide('id');" );
    			
    }
    Code:
    	
    <dt onclick="javascript:show('4');" id="c4">Forth Menu Item</dt>
    <dd id="4">
    <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Why partner with First Horizon Msaver?</a></li>
    <li><a href='#'>Speaking Engagements</a></li>	
    </ul>
    </dd>
    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:
    Code:
    	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!)

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1)Looking at your code, it's apparent that you don't what this does:

    javascript:

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •