Results 1 to 6 of 6

Thread: access events of objects in an array

  1. #1
    Join Date
    Oct 2007
    Location
    Germany, Berlin
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default access events of objects in an array

    Heyho,
    I've tried to write a jscript function with parameters for every link in a certain list. The script works fine but I cannot write the events?!
    Simple example:
    Code:
    <ul id="menu">
    			<li><a href="#"><span>willkommen</span></a></li>
    			<li><a href="#"><span>olfdsre</span></a></li>
    			<li><a href="#"><span>lkjhre</span></a></li>
    			<li><a href="#"><span>dskjhre</span></a></li>
    			<li><a href="#" class="active"><span>ohre</span></a></li>
    			<li><a href="#"><span>olfd</span></a></li>
    			<li><a href="#"><span>olfdkjhre</span></a></li>
    </ul>
    
    <script type="text/javascript">
    var menucontainer;
    var linklist = new Array(16);
    var z=0;
    
    if (document.all)
    	menucontainer = document.all["menu"];
    else if (document.getElementById)
    		menucontainer = document.getElementById("menu");
    
    linklist = menucontainer.getElementsByTagName("a");
    
    for (z=0;z<=linklist.length-1;z++) 
    {
    	linklist[z].onMouseOver = alert("test"); // works only one time: when loading script!
    }
    </script>
    If I write "onMouseOver" as parameter in every link it works, of course, but the links are generated out of a database and the output is like in the structure above. I also do not want to write more than necessary in the great xhtml structure of my design !
    I thought that would be the most easiest thing but - I am a JS beginner .
    Help, please!

    greetings
    Max

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Your two main problems are that:

    1. In javascript, event names are all lowercase, onmouseover, not onMouseOver.
    2. You must assign a function, onmouseover=function(){alert('test');};


    There look to possibly be other problems. One thing is that the array length doesn't match its later size, but it may be overwritten so that might not matter. Another is that if document.all is supported and not document.getElementById, as your script allows for, document.getElementsByTagName will not work.

    This is pretty good:

    Code:
    <ul id="menu">
    			<li><a href="#"><span>willkommen</span></a></li>
    			<li><a href="#"><span>olfdsre</span></a></li>
    			<li><a href="#"><span>lkjhre</span></a></li>
    			<li><a href="#"><span>dskjhre</span></a></li>
    			<li><a href="#" class="active"><span>ohre</span></a></li>
    			<li><a href="#"><span>olfd</span></a></li>
    			<li><a href="#"><span>olfdkjhre</span></a></li>
    </ul>
    
    <script type="text/javascript">
    ;(function(){
    if(document.getElementById){
    var menucontainer = document.getElementById("menu");
    var linklist = menucontainer.getElementsByTagName("a");
    var doit=function(){alert("test");};
    for (var z=0;z<linklist.length;z++) 
    linklist[z].onmouseover = doit; // works!
    }
    })();
    </script>
    Making it an anonymous function (red parts) simply protects its variables from the global scope, and may be skipped.
    Last edited by jscheuer1; 01-14-2008 at 04:42 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    What was the leading empty statement for?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Twey View Post
    What was the leading empty statement for?
    When anonymous functions are added to poorly written code that otherwise works, it will avoid an error.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2007
    Location
    Germany, Berlin
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Thx

    Thanks, Jscheuer1! Of course, I have already packed everything in an external .js-file and in functions. At the end of my page code I only write <script type="text/javascript">linkinit();</script> to execute the script, start loving javascript and I am finished with this problem.
    I made this script because the client needs a menu on which the linktext of the linklogo on which you were with you mouse last stays visible.
    For further visitors (see html-structure above):
    Code:
    var typecontainerid="menu";
    var menucontainer;
    var linklist = new Array(16);
    
    
    function linkinit() 
    {
    	var i=0;
    	var mouseover;
    
    	menucontainer = document.getElementById(typecontainerid);
    
    	linklist = menucontainer.getElementsByTagName("a");
    
    	for (i=0;i<linklist.length;i++) 
    	{
    		mouseover = function() { lastlink(this.getElementsByTagName("span")[0].firstChild.data,menucontainer); }; 
    		linklist[i].onmouseover = mouseover;
    	}
    }
    
    function lastlink(linkname,container)
    {
    	var i=0;
    	for (i=0;i<=linklist.length-1;i++)
    	{
    		if (linkname==linklist[i].getElementsByTagName("span")[0].firstChild.data)
    			linklist[i].getElementsByTagName("span")[0].style.display = "block";
    		else
    			linklist[i].getElementsByTagName("span")[0].style.display = "none";
    	}	
    }
    By the way, the menu is generated by wayfinder, a snippet for MODx, an open source cmf which I can recommend every cms developer!!!

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    When anonymous functions are added to poorly written code that otherwise works, it will avoid an error.
    Ah, neglected semicolon on the last line. Smart, in a way
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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
  •