SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: back in time...

  1. #1
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    back in time...

    Yesterday I saw this post:

    http://www.sitepoint.com/forums/show...14#post1326014

    but how do I solve this:

    Quote Originally Posted by beetle
    For those that are listening in, andrew and I chatted last night and I came up with this solution:
    Code:
    var arrI = document.getElementsByTagName('input');
    for (i=0; i < arrI.length; i++)
    	arrI[i].attachEvent("onclick", function() {
    		element_onclick(arrI[i]);
    		});
     
    function element_onclick(elem) {
    	// code n stuff
    	}
    This way the element_onclick function receives a reference to the object that we have attached the onclick event to, not to mention that we could pass any other parameters we wanted.
    this works if you want to attach the same event to a tag, but otherwise?

    Code:
     
    function init()
    {
    var winMenuLinks=document.getElementsByTagName('span');
    var i=0;
    while(i<winMenuLinks.length)
    {
    winMenuLinks[i++].attachEvent("onclick",function(){go( winMenuLinks[i].getAttribute('href') )});
    }
    }
    eg if my last span would have a link to google, they would all have a link to google...
    reason: the attach happens in the end. Solution?

  2. #2
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a solution!

    Code:
     
    function init()
    {
     var winMenuLinks=document.getElementsByTagName('span');
     var i=0;
     while(i<winMenuLinks.length)
     {
      var x=winMenuLinks[i].getAttribute('href');
      eval("winMenuLinks[i].onclick=function(){go('" + x + "')}");
      i++;
     }
    }

  3. #3
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should be solvable without eval though?

  4. #4
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Home
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you need to use here is the this keyword. When setting a function like that you can use the this keyword to mean the element that you are currently setting the event for.

    So in your onclick bit you'd need to put function(){go(this.getAttribute('href')); } or whatever it is that your script needs.

  5. #5
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried it with the this keyword, but it doesn't work, the eval version does however, but it's not really a nice way of programming! So I was curious if there were other solutions...

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Confusing. First of all, I don't believe beetle's sample works. It's not because 'the attach happens in the end' - it's because there is a closure (object) involved, and the 'saved' value of the argument being passed represents the final value of all the variables involved. The this keyword doesn't work with event binding using IE .attachEvent(); it always points to window, a major inconsistency with DOM .addEventListener(). The usual fix: again, a closure, with the value of this captured in a function-scope variable and used instead.

    momos...don't fully understand your code. Where is the 'href' coming from (span?). Why not query the Event object for the target/srcElement?

    The Function() constructor allows run-time evaluation of function bodies, good for supplying varied arguments (though slow & messy if strings are involved).

    Interesting link.
    ::: certified wild guess :::

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simple example.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    
    body {
    	margin: 40px;
    	background: buttonface;
    }
    .linkbutton {
    	font: 12px "times new roman";
    	background: #fff;
    }
    
    </style>
    <script type="text/javascript">
    
    function makeLinkButtons()
    {
    	function button_on_mouseover(e)
    	{
    		e = e || window.event;
    		var tgt = e.target || e.srcElement;
    		tgt.style.background = '#0ff';
    		window.status = tgt.title.toUpperCase();
    	}
    	function button_on_mouseout(e)
    	{
    		e = e || window.event;
    		var tgt = e.target || e.srcElement;
    		tgt.style.background = '#fff';
    		window.status = '';
    	}
    
    	var button, href, l = 0, link, links = document.getElementsByTagName('a');
    	while (link = links.item(l++))
    		if (href = link.href)
    		{
    			button = document.createElement('input');
    			button.setAttribute('type', 'button');
    			button.setAttribute('value', link.firstChild.nodeValue);
    			button.setAttribute('title', link.getAttribute('title'));
    			button.className = 'linkbutton';
    			if (button.attachEvent)
    			{
    				button.attachEvent('onclick', new Function('self.location = "' + href + '";'));
    				button.attachEvent('onmouseover', button_on_mouseover);
    				button.attachEvent('onmouseout', button_on_mouseout);
    			}
    			else if (button.addEventListener)
    			{
    				button.addEventListener('click', new Function('self.location = "' + href + '";'), false);
    				button.addEventListener('mouseover', button_on_mouseover, false);
    				button.addEventListener('mouseout', button_on_mouseout, false);
    
    			}
    			var b = document.getElementsByTagName('body')[0];
    			if (link.getAttribute('title') == 'source')
    				b.appendChild(document.createTextNode('_____'));
    			else b.appendChild(document.createTextNode('\u0020'));
    			b.appendChild(button);
    		}
    }
    
    onload = function()
    {
    	if (document.getElementsByTagName)
    		makeLinkButtons();
    }
    
    </script>
    </head>
    <body>
    <a href="http://www.google.com" title="google">google</a><br />
    <a href="http://www.hotbot.com" title="hotbot">hotbot</a><br />
    <a href="http://www.yahoo.com" title="yahoo">yahoo</a><br />
    <a href="http://www.dogpile.com" title="dogpile">dogpile</a><br />
    <a href="http://www.excite.com" title="excite">excite</a><br />
    <a href="javascript&#58;alert(makeLinkButtons)" title="source">source</a><br /><br />
    </body>
    </html>
    http://jibbering.com/faq/faq_notes/closures.html
    Last edited by adios; Jul 30, 2004 at 06:46.
    ::: certified wild guess :::

  8. #8
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, very nice example


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
  •