Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: this in IE

  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    this in IE

    I am trying to understand how I can use "this" in IE. I am a little confused but if I understood the information I founded I understand that "this" in IE is not pointing at the element that couse the event but instead the object "window".

    I tested the following code in an older version of IE and it did not work (but work in firefox, safari, chrome and IE 8 or 9 I think:

    Code:
    function addListeners(){	
    	var els = document.getElementsByTagName('*'), divs = [];
    	for(var i = 0; i < els.length;i++){		
        		els[i].id.indexOf("show") == 0 && divs.push(els[i]);
        		els[i].id.indexOf("link") == 0 && addEvent(els[i],"click", function(){	
    	
          	for (var i = 0; i < divs.length;i++){		  
    		  divs[i].style.display = 'none'
    	}
    	
          	document.getElementById('show' + this.id.split('link')[1]).style.display = 'block';
    });
    }
    }
    
     window.addEvent(window,"load", addListeners, false);
    
    
     
    function addEvent(element, eventType, theFunction, capture)
    {
    
        if(element.addEventListener)
        {
    
            element.addEventListener(eventType, theFunction, capture);
        }
    
        else if(element.attachEvent)
        {
    
           element.attachEvent( "on" + eventType, theFunction);
         ("on" + eventType)
        }
    }
    HTML:
    Code:
    <div id="menu">
    
    <ul>
    <li id="event"><a id="link1"><img class="font" src="bilder/event_video.jpg" alt="Intercombio e turismo" width="204" height="204"></a></li>
    <li id="foretag"><a id="link2"><img class="font" src="bilder/foretagsvideo.jpg" alt="Fic Intercombio" width="204" height="204"></a></li>
    <li id="musikvideo"><a id="link3"><img class="font" src="bilder/musikvideo.jpg" alt="Intercombio e turismo" width="204" height="204"></a></li> 
    <li id="reklam"><a id="link4"><img class="font" src="bilder/reklam_video.jpg" alt="Intercombio e turismo" width="204" height="204"></a></li> 
    </ul>
    
    </div>
    
    <div id="show1" class="hide">
    <p>TEXT</p>
    </div>
    <div id="show2" class="hide">
    <p>TEXT2</p>
    </div>
    <div id="show3" class="hide">
    <p>TEXT3</p>
    <div id="show4" class="hide">
    <p>TEXT4</p>
    </div>
    CSS
    Code:
    	#show1{
              width: 800px; font-size:14px;
    	line-height: 20px;
    	text-align: justify;
        margin: 0 auto;
               }	
    	#show2{
              width: 800px; font-size:14px;
    	line-height: 20px;
    	text-align: justify;
        margin: 0 auto;
               }
    	#show3{
              width: 800px; font-size:14px;
    	line-height: 20px;
    	text-align: justify;
        margin: 0 auto;
               }
    		   
    		#show4{
              width: 800px; font-size:14px;
    	line-height: 20px;
    	text-align: justify;
        margin: 0 auto;
               }
    	.show{
                 width: 800px;
    			 display:block;}
    			 
    	.hide{
              display: none;
               }
    My question is how you do instead of using "this" to make it work in all browsers?

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    You got this part messed up.
    Maybe a bad copy and paste ?
    for(var i = 0; i < els.length;i++){
    els[i].id.indexOf("show") == 0 && divs.push(els[i]);
    els[i].id.indexOf("link") == 0 && addEvent(els[i],"click", function(){



    About the "this" difference between browsers
    read here ...
    http://ejohn.org/projects/flexible-javascript-events/

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Thanks

    Thank you DaveyErwin for a great link! I have been studing and maybe I got it right now. But what did you meant was messed up here:
    for(var i = 0; i < els.length;i++){
    els[i].id.indexOf("show") == 0 && divs.push(els[i]);
    els[i].id.indexOf("link") == 0 && addEvent(els[i],"click", function(){

    It is an anonymous function. In the browsers I have testet it seams now to work in every browser (I hope):

    Code:
    function addListeners(){	
    	var els = document.getElementsByTagName('*');
    	divs = [];
    	for(var i = 0; i < els.length;i++){		
        		els[i].id.indexOf("show") == 0 && divs.push(els[i]);
        		els[i].id.indexOf("link") == 0 && addEvent(els[i],"click", function(){	
    	
          	for (var i = 0; i < divs.length;i++){		  
    		  divs[i].style.display = 'none'
    	}
    	
          	document.getElementById('show' + this.id.split('link')[1]).style.display = 'block';
    });
    }
    }
    
     window.addEvent(window,"load", addListeners, false);
    
     function addEvent( obj, type, fn ) {
       if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
         obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
         obj.attachEvent( 'on'+type, obj[type+fn] );
       } else
        obj.addEventListener( type, fn, false );
    }
    Even the code seam to work perfectly I don´t understand how function addEvent is fired off? When the window load and a click has happen the anonymous function show an element. Is it the loading of the window that make the function addEvent work?
    I would appreciate if you would like to axplain the function for my own understanding.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Energia View Post
    I don´t understand how function addEvent is fired off? When the window load and a click has happen the anonymous function show an element. Is it the loading of the window that make the function addEvent work?
    I would appreciate if you would like to axplain the function for my own understanding.
    els[i].id.indexOf("link") == 0 && addEvent(els[i],"click",function ......

    if the id of els[i] starts with link
    the indexOf link is 0
    then the part after && is evaluated
    and the function addEvent is fired

  • Users who have thanked DaveyErwin for this post:

    Energia (02-01-2012)

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Thanks again!

    Now I see it was embarrassing to ask, because it was clear in the code. But I think I have been staring and thinking about it too long time..!

    Thanks for your teaching!

    Quote Originally Posted by DaveyErwin View Post
    els[i].id.indexOf("link") == 0 && addEvent(els[i],"click",function ......

    if the id of els[i] starts with link
    the indexOf link is 0
    then the part after && is evaluated
    and the function addEvent is fired


  •  

    Tags for this Thread

    Posting Permissions

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