1

Uncaught TypeError:Cannot call method 'addEventListener' of null エラーがサイトで発生し、ブラウザー間で多大な問題が発生しています。

問題は、addEventListener が Chrome と IE8 で認識されないことにあると思います。

これは私の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

他の人が言及したように、古いバージョンの IE は と呼ばれる独自の非標準メソッドattachEventを使用するため、使用するメソッドを検出する必要があります。

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

詳細はこちら

また、IE8 までサポートされていないquerySelector()とを使用してquerySelectorAll()います。

さらに、DOMContentloadedイベントは IE9+ でのみサポートされています。

于 2013-09-27T02:02:28.587 に答える
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 に答える