Kelsey Cooper Kelsey Cooper - 7 months ago 20
Javascript Question

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

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>

Answer

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.