-3

I am new to coding and in my first year of university studying Web Technologies. For my web assignment I had to create a web application which would allow the user to set different preferences for careers and display the careers which match the preferences.

Anyway I have managed to do this but I have a problem in Internet Explorer, my site works fine in Safari, Chrome and Firefox. However, in IE when you press my search button no JavaScript seems to run. I have debugged my site in IE and it has come up with an error for this section of code:

var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("click", reset, false);

The error occurs on the second line and the message is:

Object doesn't support property or method

What do I have to do to fix the error?

Screenshot of error

Link to screenshot

Thank You

NJones
  • 27,139
  • 8
  • 70
  • 88
kwright2713
  • 53
  • 1
  • 1
  • 5
  • Are you using IE8 or earlier? If so, the issue that you are likely facing is answered here: http://stackoverflow.com/questions/6927637/addeventlistener-in-internet-explorer – talemyn May 03 '13 at 17:59
  • 1
    @Bojangles if you right click the image and hit Open Image in New Tab, the picture is very clear. I agree though he should have just focused in on just the error. – aug May 03 '13 at 18:01
  • @Bojangles There was a link below before which took you to the image which I uploaded to photobucket so that it could be seen easier by you guys. However, someone has edited my post and embedded it into my text which has made it harder to view. I am using IE8. – kwright2713 May 03 '13 at 18:03
  • All valid points, but what if imgur.com dies on day? Unlikely, but entirely possible. Then this question is useless to future visitors – Bojangles May 03 '13 at 18:08
  • @Bojangles all I wanted was a little help on my problem, I am a first poster on here. Therefore, I aren't going to do everything perfectly, so please cut me some slack. – kwright2713 May 03 '13 at 18:11
  • 2
    Well, at any rate you now know what to do next time you post a question (which I'm perfectly happy to answer if I can, by the way) – Bojangles May 03 '13 at 18:14
  • Now, THIS is homework ! – Milche Patern May 03 '13 at 18:51
  • 2
    @Milche Patern I have already submitted my assignment. For my assignment it only had to work in Chrome and Firefox, which it does fine, I was just wanting to see if I could solve this problem with IE. Next year I learn jQuery which will probably solve these cross browser compatibility issues. I wanted to find the solution not for my assignment purposes but for my own knowledge in fact. – kwright2713 May 03 '13 at 19:03

3 Answers3

6

In Internet Explorer you need to use attachEvent

Related Question: MSIE and addEventListener Problem in Javascript?

Community
  • 1
  • 1
aug
  • 11,138
  • 9
  • 72
  • 93
  • Or use jQuery (or another abstraction library) so you don't have to worry about cross-browser compatibility like it's 2001. – Stoop May 03 '13 at 18:19
  • @Joe For this web assignment we wasn't allowed to use jQuery as we study this next year, so was just wondering what solution you guys would come up with. Looking forward to learning jQuery to solve all of these browser compatibility issues. – kwright2713 May 03 '13 at 18:31
  • Then you are going to have to write cross-browser compatible code, which is explained in @aug's Related Question link. I don't see your HTML in your screenshot, but if "resetBtn" is an anchor or input element, then as an alternative to raw javascript, you can just use the onclick attribute of the element. – Stoop May 03 '13 at 18:41
2

Yeah, like said before, IE doesn't know addEventListener method, so, you need to do this:

var resetBtn = document.getElementById("resetBtn");
if( resetBtn.addEventListener ){
    resetBtn.addEventListener("click", reset, false);
}else{
    resetBtn.attachEvent("onclick", reset);
}

This way, you're doing the correct way which is to check for abilities of the browser. In this case in particular, we are testing if the browser supports addEventListener (standard method) if not, fallback to IE method which is attachEvent and the event name must be preceded by an "on" word.

Again, as mentioned above, you can include a library such as jquery, prototype, mootools, etc. But i would strongly suggest to keep it in pure JS for learning purposes, yeah, libraries help you code more quickly, but you'll skip a lot of learning and besides, pure JS is WAY faster than any library any day, any time.

Hope this helps.

Sam Ccp
  • 1,102
  • 3
  • 12
  • 19
0

It seems your IE is in compatibility mode, behaving as old versions that did not support addEventListener. If you don't care about IE 8 and earlier, you can force the browser out of compatibility mode by issuing a X-UA-Compatible header from your server. You can also set the following meta tag on the <head> of your HTML file (although issuing a proper HTTP header from the server is also highly recommended):

<meta http-equiv="X-UA-Compatible" content="IE=Edge" >

If you need to support old IE, look into attachEvent as suggested in aug's answer.

bfavaretto
  • 71,580
  • 16
  • 111
  • 150