title: Setting a watch expression in Firebug: ReferenceError - s is not defined
body: <p>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 <strong>Script tab</strong> of Firebug and opened the <strong>Watch pane</strong> and entered <strong>s</strong> into the area that says "<strong>New watch expression</strong>". </p>
  
  <p>I get an error: </p>
  
  <pre><code>ReferenceError: s is not defined
  </code></pre>
  
  <p>Why?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  .StateOne .InitiallyHidden { display: none; }
  .StateTwo .InitiallyVisible { display: none; }
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
      $(document).ready(function()
      {
  
          $('.x').click(function() {
                 var s = $("#StateContainer")[0];
                 s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
          });
  
      });
  &lt;/script&gt;
  
  
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;button class="x"&gt;Change StateContainer&lt;/button&gt;
  
  &lt;div class="StateOne" id="StateContainer"&gt;
     &lt;div class="InitiallyVisible"&gt;Visible first&lt;/div&gt;
     &lt;div class="InitiallyHidden"&gt;Visible second&lt;/div&gt;
     &lt;div class="InitiallyVisible"&gt;Visible first&lt;/div&gt;
     &lt;div class="InitiallyHidden"&gt;Visible second&lt;/div&gt;
     &lt;div class="InitiallyVisible"&gt;Visible first&lt;/div&gt;
     &lt;div class="InitiallyHidden"&gt;Visible second&lt;/div&gt;
     &lt;div class="InitiallyVisible"&gt;Visible first&lt;/div&gt;
     &lt;div class="InitiallyHidden"&gt;Visible second&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>