admin管理员组

文章数量:1399805

I'm trying to understand how to use firebug to debug my Javascript. So I have the HTML listed below. And I want to set a watch expression on the var 's'. I went to the Script tab of Firebug and opened the Watch pane and entered s into the area that says "New watch expression".

I get an error:

ReferenceError: s is not defined

Why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">

<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=".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>

I'm trying to understand how to use firebug to debug my Javascript. So I have the HTML listed below. And I want to set a watch expression on the var 's'. I went to the Script tab of Firebug and opened the Watch pane and entered s into the area that says "New watch expression".

I get an error:

ReferenceError: s is not defined

Why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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>
Share Improve this question asked Jul 11, 2009 at 15:54 Charlie KotterCharlie Kotter 1,8893 gold badges16 silver badges13 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

The variable 's' is only defined inside the click handler for 'x' because it is declared within the function. If you set a breakpoint inside your click function then 's' will work.

It's generally not good practice to create global variables, but for the sake of debugging you could make 's' a global variable by declaring it outside of the $(document).ready() function, like so:

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

本文标签: javascriptSetting a watch expression in Firebug ReferenceErrors is not definedStack Overflow