addEventListener giving IE8 issues. Is it possible to convert my JavaScript to jQuery?

Question

I'm getting an Uncaught TypeError:Cannot call method 'addEventListener' of null error on my site which is giving me a huge amount of trouble between browsers.

I believe the issue lies with the addEventListener not being recognized in Chrome and IE8.

This is my js code.

var init = function() {
var box = document.querySelector('.container').children[0],
  showPanelButtons = document.querySelectorAll('#show-buttons button'),
  panelClassName = 'show-front', 

  onButtonClick = function( event ){
    box.removeClassName( panelClassName );
    panelClassName = event.target.className;
    box.addClassName( panelClassName );
  };

for (var i=0, len = showPanelButtons.length; i < len; i++) {
showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
}

document.getElementById('toggle-backface-visibility').addEventListener( 'click',                 function(){
box.toggleClassName('panels-backface-invisible');
 }, false);

};

window.addEventListener( 'DOMContentLoaded', init, false);

I'm wondering if it would be possible (also how hard it would be) to convert this js to jQuery?

**Now including my html (sorry about it being sloppy, this started as a school project)

<html lang="en" class=" js csstransforms3d"><head>
<meta charset="UTF-8">

<!-- disable zooming -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=0">
<meta name="description" content="CooperCreative is a design house based out of Fredericton, New Brunswick. The Goal of CooperCreative is to satisfy customers with beautiful design, incredible dedication to meet all deadlines, and customer service. " />

<meta name="keywords" content="Graphic Design, web design, design, designer, marketting, New Brunswick, Fredericton, business card design, Print advertisement, banner design, flash design, interactive design, logo design, brochure design, newsletter deisgn, packaging design, signage, photo retouching" />
<meta name="language" content="english" />
<title>CooperCreative</title>

<link rel="stylesheet" href="css/style.css" media="screen">

<link href="css/lightbox.css" rel="stylesheet" />

<style type="text/css">
body {
background-image: url(debut_dark_@2X.png);
background-repeat: repeat;
margin: 0;
padding: 0;
}
</style>
<!-- this is the contect google font code -->

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'      type='text/css'>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-43798300-1', 'coopercreative.ca');
ga('send', 'pageview');

</script>
</head>
<body        onLoad="MM_preloadImages('images/homebuttonup.png','images/aboutbuttonup.png','images/services buttonup.png','images/portfoliobuttonup.png','images/resumebuttonup.png','images/contactbuttonup.png')">
<div id="header">
<div id="logo"><img src="images/logo.png" width="425" height="50"></div>

<div id="buttoncontainer">
<section id="options">


<p id="show-buttons">
  <button class="show-front" id="buttonfront"></button>
  <button class="show-back" id="buttonback"></button>
  <button class="show-right" id="buttonright"></button>
  <button class="show-left" id="buttonleft"></button>
  <button class="show-top" id="buttontop"></button>
  <button class="show-bottom" id="buttonbottom"></button>
</p>
</section>

</div>








</div>
<div id="spacer"></div>








<section class="container">
<div id="cube" class=" panels-backface-invisible  show-front">
  <span class="front">
    <div id="frontdiv">
  <img src="images/frontlogo.png" width="600" height="600"></div></span>
  <span class="back">
    <div id="backdiv">
      <div id="boxtitles">About</div>    <div id="innerdiv"></div>


      </div></div>


</span>




  <span class="right"><div id="boxtitles">Services</div>

  <div id="innerdiv">
</div>

  </span>
  <span class="left"><div id="boxtitles">Portfolio</div><div id="innerdiv">
    <div id="innertopleft">

    <a href="port/1.jpg" data-lightbox="print" title="Print Media"><img src="port/printmedia.png" width="203" height="234"></a>



    </div>
  <div id="innertopright"><a href="port/l1.jpg" data-lightbox="logo" title="Logo Design">     <img src="port/logodesign.png" width="169" height="212"></a>


  </div>

  <div id="innerbottomleft"><a href="port/w1.jpg" data-lightbox="web" title="Web Development"><img src="port/webdevelopment.png" width="169" height="212"></a>


  </div>

  <div id="innerbottomright"><a href="port/c1.jpg" data-lightbox="con" title="Web     Development"><img src="port/conceptual.png" width="169" height="212"></a>



  </div>




  </div>

  </span>
  <span class="top"><div id="boxtitles">Contact</div>

   <div id="innerdivcontact">
  <div id="innerdivcontact2">

    </div>

<form id="form2" action="contact-form-handler.php" method="post">   

        <fieldset><legend>Contact form</legend>
            <p class="first">
                <label for="name"><b>Name*</b></label>
                <input type="text" name="name" id="name" size="30" />
            </p>
            <p>
                <label for="email"><b>Email*</b></label>
                <input type="text" name="email" id="email" size="30" />
            </p>

            <p>
                <label for="message"><b>Message</b></label>
                <textarea name="message" id="message" cols="30" rows="10"></textarea>
            </p>                    

            <p class="submit"><button type="submit">Send</button></p>       

        </fieldset>                 

    </form> 

  </div>

  </span>


  <span class="bottom"><div id="boxtitles">Social</div>


  <div id="innerdivthanks">
 </div>


</div>

  </span>




</div>



</section>



</body>
<script src="js/utils.js"></script>
<script src="js/rotate-box.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<script language="JavaScript" src="js/gen_validatorv31.js" type="text/javascript">   </script>
</html>

possible duplicate of [MSIE and addEventListener Problem in Javascript?](http://stackoverflow.com/questions/1695376/msie-and-addeventlistener-problem-in-javascript) — Brian, Sep 27 '13 at 01:05
Possible? Of course, jQuery *is* JavaScript after all. How hard? That's relative to your particular skill set. Give it a shot yourself, and post a specific question when you get stuck. — Colin Brock, Sep 27 '13 at 01:08
Have you heard of `Element.attachEvent()`? Also, why would you use `document.querySelector()` if you're trying to be backward compatible. — StackSlave, Sep 27 '13 at 01:09
`document.querySelectorAll('#show-buttons button')` seems that you are using same `id` on multiple elements, if it's then it's wrong and show your `html` so it'll clearly tell us hoe to build it in `jQuery`. — The Alpha, Sep 27 '13 at 01:14
Your `html` is not valid (invalid nesting and multiple elements have same id). — The Alpha, Sep 27 '13 at 02:12
Try the given code, hope it'll work, coded without `html` just from vanilla `JavaScript` code. — The Alpha, Sep 27 '13 at 02:13

score 0 · Accepted Answer · edited May 03 '16 at 10:00

0

You may try this (converted from given vanilla JavaScript code, no html, not tested but hope it'll work)

$(function(){
    $('#show-buttons').on('click', 'button', function(e){
        $('.container').children(':first').removeClass('show-front').addClass($(e.target).attr('class'));
    });

    $('#toggle-backface-visibility').on( 'click', function(){
        $('.container').children(':first').toggleClass('panels-backface-invisible');
    });
});

Use jQuery-1x, latest(2x) jQuery doesn't support IE-6/7/8.

edited May 03 '16 at 10:00

marc_s

732,580
175
1,330
1,459

answered Sep 27 '13 at 01:50

The Alpha

143,660
29
287
307

This works! the only issue I have now is that once a button is clicked it preforms what I want it to do, but only once. The 'show-front' is removed but it's meant to remove the state thats put in on every button click: 'show-back' 'show-right' 'show-left'. Is there a simple way add that function? I'm sorry I'm very new to this and don't want to be asking for hand outs. I'l continue tinkering. – Kelsey Cooper Sep 27 '13 at 12:33
I didn't understand what you meant ? – The Alpha Sep 27 '13 at 17:15

score 0 · Answer 2 · answered Sep 27 '13 at 02:02

As others have mentioned, older versions of IE use its own non-standard method called attachEvent, so you need to detect which method to use:

if(window.addEventListener)
{
    ...
    window.addEventListener('click', init, false);
    ...
}
if(window.attachEvent)
{
    window.attachEvent('onclick',init);
}

More details here

Also, you are using querySelector() and querySelectorAll() which are not supported until IE8.

Furthermore, the DOMContentloaded event is only supported in IE9+.

addEventListener giving IE8 issues. Is it possible to convert my JavaScript to jQuery?

2 Answers2