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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to change Javascript to work with IE

    Code:
    <style type="text/css">
    .highlight{
    background-color: orange;
    color: white;
    }
    </style>
    
    <script type="text/javascript">
    function createListener(){
    document.addEventListener('click', function(event){
    var element=event.target;
    if(element!==document.body){
    if(element.className===''){
    element.className='highlight';
    } else {
    element.className='';
    }
    }
    }, false);
    }
    </script>
    
    <body onload="createListener()">
    Last edited by cbanks; 11-07-2012 at 04:27 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    The standard way to attach event listeners is to use addEventListener but IE8 and earlier use attachEvent instead.

    http://javascript.about.com/library/bldom19.htm

    http://www.howtocreate.co.uk/tutoria...ript/domevents


    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.
    Last edited by Philip M; 11-07-2012 at 04:27 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I changed the line below, but it still doesn't work. What am I missing?

    Code:
    document.attachEvent('onclick', function(event){

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,622
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You might need to show a bit more of the code. How have you combined addEventListener and attachEvent together?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I changed the code to what appears below, but it still doesn't work.

    Code:
    <style type="text/css">
    .highlight{
    background-color: orange;
    color: white;
    }
    </style>
    
    <script type="text/javascript">
    function createListener(){
    document.attachEvent('onclick', function(event){
    var element=event.target;
    if(element!==document.body){
    if(element.className===''){
    element.className='highlight';
    } else {
    element.className='';
    }
    }
    }, false);
    }
    </script>
    
    <body onload="createListener()">

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Try using the forum search feaure. You will find very extensive information by felgall at

    event model difference

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I took a look at that page and I'm still not sure what changes need to be made.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,622
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You need to use whichever of the two types of call that the browser being used supports. The latest example of the code you posted specifically uses attachEvent and so will only work in Internet Explorer.

    Substitute a call to a new addEvent function in place of attachEvent and then add code that creates that function to call either addEventListener or attachEvent depending on which the browser supports.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't need it to work for other browsers, just IE 8 and older, so that's why I changed some of the code to use attachEvent instead. I just don't know what else to add or change to make the code work.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    That code is wrong.

    MSIE doesn't pass the event object to the event handlers.

    You need to simply get it via window.event within the body of the function.

    Also, attachEvent only takes two arguments. Though I can't see how passing the third one would hurt.

    Also, the window.event object does *NOT* have any property named target. The correct property is srcElement.

    If you are going to do MSIE-only development, maybe you should read the MSIE docs?

    Try this:
    Code:
    <html>
    <head>
    <style type="text/css">
    .highlight{ background-color: orange; color: white; } 
    </style>
    </head>
    <body>
    stuff and more
    <input type="button" value="click me" />
    
    <script type="text/javascript">
    function createListener()
    { 
        document.attachEvent('onclick', 
              function()
              { 
                    var evt = window.event;
                    var element = evt.srcElement; 
                    if(element!==document.body)
                    { 
                         if(element.className=="") { element.className='highlight'; } 
                         else { element.className=''; } 
                    } 
             }
        );
    }
    createListener();
    </script>
    </body>
    </html>
    Or, even simpler:
    Code:
    <html>
    <head>
    <style type="text/css">
    .highlight{ background-color: orange; color: white; } 
    </style>
    </head>
    <body>
    stuff and more
    <input type="button" value="click me" />
    
    <script type="text/javascript">
        document.attachEvent('onclick', 
              function()
              { 
                    var elem = window.event.srcElement;
                    if( elem !== document.body )
                    { 
                         elem.className = (elem.className=="") ? "highlight" : "";
                    } 
             }
        );
    </script>
    </body>
    </html>
    Last edited by Old Pedant; 11-08-2012 at 12:12 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't get either one of those code examples to work.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,622
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by cbanks View Post
    I can't get either one of those code examples to work.
    Which version of IE are you using? That code should work fine in IE6, 7 and 8 (and probably 5 as well).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it to work. But when I save the page I want it to save the highlighting changes that I've made. How would I do that?

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    You can't "save" an HTML page.

    What is "save" supposed to mean?

    You mean bookmark it?

    Regardless of whether it is bookmarked or not, you probably need to learn to use cookies to maintain page state.

    Note that cookies are on a PER MACHINE PER USER basis. So highlighting done by Joe won't be seen by Mary.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,622
    Thanks
    0
    Thanked 645 Times in 635 Posts
    The only way to"save" the changes so everyone can see them is to use a call to the server to pass the changes so that a server side script can update the original page source.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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