2009-07-11 3 views
3

私はJavascriptをデバッグするためにfirebugを使用する方法を理解しようとしています。だから、私は以下のHTMLを持っています。そして、私はvar 'sの時計表現を設定したいと思います。私はFirebugののスクリプト]タブに行って、ウォッチペインを開き、「新しいウォッチ式」というエリアにに入りました。Firebugでwatch式を設定する:ReferenceError -sが定義されていません

私はエラーを取得する:

ReferenceError: s is not defined 

なぜ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 
.StateOne .InitiallyHidden { display: none; } 
.StateTwo .InitiallyVisible { display: none; } 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 
    $(document).ready(function() 
    { 

     $('.x').click(function() { 
       var s = $("#StateContainer")[0]; 
       s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne'); 
     }); 

    }); 
</script> 





</head> 

<body> 

<button class="x">Change StateContainer</button> 

<div class="StateOne" id="StateContainer"> 
    <div class="InitiallyVisible">Visible first</div> 
    <div class="InitiallyHidden">Visible second</div> 
    <div class="InitiallyVisible">Visible first</div> 
    <div class="InitiallyHidden">Visible second</div> 
    <div class="InitiallyVisible">Visible first</div> 
    <div class="InitiallyHidden">Visible second</div> 
    <div class="InitiallyVisible">Visible first</div> 
    <div class="InitiallyHidden">Visible second</div> 
</div> 



</body> 
</html> 

答えて

6

変数 's'は関数内で宣言されているため、 'x'のクリックハンドラー内でのみ定義されます。クリック関数内にブレークポイントを設定すると、 's'が機能します。

それは、一般的にグローバル変数を作成することをお勧めではないですが、デバッグのためにあなたがそうのように、$(ドキュメント).ready()関数の外にそれを宣言することにより、「S」グローバル変数作ることができます:

<script language="javascript" type="text/javascript"> 
    var s; 
    $(document).ready(function() 
    { 

     $('.x').click(function() { 
       s = $("#StateContainer")[0]; 
       s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne'); 
     }); 

    }); 
</script> 
関連する問題