10

これは私が見続けているFirebugのエラーです。

TypeError: $("#gallery-nav-button") is null
 [Break On This Error]  
$('#gallery-nav-button').addClass('animated fadeOutRightBig');

これが私のコードです：

JS

$(function() {
  $("#close-gallery-nav-button").click(function() {
    $('#gallery-nav-button').addClass('animated fadeOutRightBig');
   });
});

HTML

<div id="gallery-nav-button">
  <h4 id="close-gallery-nav-button">X</h4>
    <h3 class="text-center small-text"><a class="inline text-center small-text" href="#gallery-nav-instruct">Click Here for Gallery <br /> Navigation Instructions.</a></h3>
</div>

CSS

#close-gallery-nav-button{
  text-indent:-9999px; 
  width:20px; 
  height:20px; 
  position:absolute; 
  top:-20px; 
  background:url(/images/controls.png) no-repeat 0 0;
}
#close-gallery-nav-button{background-position:-50px 0px; right:0;}
#close-gallery-nav-button:hover{background-position:-50px -25px;}
4

4 に答える 4

42

また、これは重要なエラー メッセージ「TypeError: [x] is null」の Google 検索結果の第 1 位であるため、JavaScript 開発者がこれを受け取る最も一般的な理由は、イベントを割り当てようとしているということも付け加えておきます。ハンドラーを DOM 要素に追加しましたが、DOM 要素はまだ作成されていません。

コードは基本的に上から下に実行されます。ほとんどの開発者は、JavaScript を HTML ファイルの先頭に配置します。ブラウザはサーバーから HTML、CSS、および JavaScript を受け取りました。Web ページを「実行」/レンダリングしています。JavaScript を実行していますが、HTML ファイルを「実行」/レンダリングするために HTML ファイルをさらに下に移動していません。

これを処理するには、JavaScript が実行される前に遅延を導入する必要があります。たとえば、ブラウザーがすべての HTML を「実行」し、「DOM 準備完了」イベントを発生させるまで呼び出されない関数内に JavaScript を配置するなどです。

生の JavaScript では、window.onload を使用します。

window.onload=function() {
   /*your code here*
   /*var date = document.getElementById("date");
   /*alert(date);
}

jQuery では、ドキュメントの準備ができて使用します。

$(document).ready(function() {
   /*your code here*
   /*var date = document.getElementById("date");
   /*alert(date);
});

このように、ブラウザーが DOM を構築し、HTML 要素が存在し (not null :-) )、JavaScript がそれを見つけてイベント ハンドラーをアタッチできるようになるまで、JavaScript は実行されません。

于 2013-08-27T15:43:11.227 に答える
13

このページでいくつかのスクリプトを実行していますが、明らかに 1 つのスクリプトが別のスクリプトと競合していました。私の問題を解決するために、jQuery.noConflict();を追加しました。

var $j = jQuery.noConflict();
$j(function() {
  $j("#close-gallery-nav-button").click(function() {
    $j('#gallery-nav-button').addClass('animated fadeOutRightBig');
   });
});
于 2012-09-26T23:51:43.973 に答える
0

onload イベントに関する上記のアドバイスに同意します。https://stackoverflow.com/a/18470043/2115934

より簡単な解決策 (必ずしもより良い解決策とは限りません) は、script タグを文書の終了 body タグの直前に置くことです。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1></h1>
<p></p>
<script src="script.js" type="text/javascript"></script> <!-- PUT IT HERE -->
</body>
</html>
于 2013-11-27T18:04:49.193 に答える