1

我在我的网站上收到 Uncaught TypeError:Cannot call method 'addEventListener' of null 错误，这给我在浏览器之间带来了很多麻烦。

我认为问题在于 Chrome 和 IE8 中无法识别 addEventListener。

这是我的js代码。

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

我想知道是否有可能（也很难）将此 js 转换为 jQuery？

**现在包括我的 html （对不起，它是马虎的，这是作为一个学校项目开始的）

<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>
4

2 回答 2

0

你可以试试这个（从给定的香草 JavaScript 代码转换，不html，没有测试，但希望它会工作）

$(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');
    });
});

使用jQuery-1x , latest( 2x) jQuery 不支持 IE-6/7/8。

于 2013-09-27T01:50:39.790 回答
0

正如其他人所提到的，旧版本的 IE 使用自己的非标准方法称为attachEvent，因此您需要检测使用哪种方法：

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

更多细节在这里

此外，您正在使用querySelector()并且在 IE8querySelectorAll()之前不受支持。

此外，仅 IE9+ 支持DOMContentloaded事件。

于 2013-09-27T02:02:28.587 回答