How to change Javascript to work with IE

cbanks · 11-07-2012, 04:03 PM

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()">

Philip M · 11-07-2012, 04:25 PM

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.

cbanks · 11-07-2012, 04:34 PM

I changed the line below, but it still doesn't work. What am I missing?

Code:

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

felgall · 11-07-2012, 06:36 PM

You might need to show a bit more of the code. How have you combined addEventListener and attachEvent together?

cbanks · 11-07-2012, 07:01 PM

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()">

Philip M · 11-07-2012, 07:28 PM

Try using the forum search feaure. You will find very extensive information by felgall at

http://www.codingforums.com/showthread.php?t=265184

cbanks · 11-07-2012, 08:46 PM

I took a look at that page and I'm still not sure what changes need to be made.

felgall · 11-07-2012, 09:10 PM

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.

cbanks · 11-07-2012, 10:25 PM

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.

Old Pedant · 11-08-2012, 12:04 AM

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>

cbanks · 11-08-2012, 03:24 PM

I can't get either one of those code examples to work.

felgall · 11-08-2012, 06:52 PM

Quote:

Originally Posted by cbanks

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).

cbanks · 11-08-2012, 07:32 PM

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?

Old Pedant · 11-08-2012, 07:45 PM

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.

felgall · 11-08-2012, 08:01 PM

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.