title: Converting an <a href=...> to a button onclick
body: <p>I'm following along with a jquery tutorial that gets initialized with a standard href text link. I have everything working. As the final step, I want to remove the text link and replace it with a button using its click event. Here is my code as it exists right now:</p>
  
  <pre><code>//this is the line that I want to replace with a button    
  &lt;a href="#login-box" class="login-window"&gt;Log In&lt;/a&gt; 
  
  // notice how that previous line somehow invokes this next section.
  // this is the part that I don't understand how to do with a button
  &lt;div id="login-box" class="login-popup"&gt; 
      &lt;a href="#" class="close"&gt;
          &lt;img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /&gt;
      &lt;/a&gt;
  
      &lt;form method="post" class="signin" action="#"&gt;
          &lt;fieldset class='textbox'&gt;
              &lt;label class="username"&gt;
                  &lt;span&gt;Username:&lt;/span&gt;
                  &lt;input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username"&gt;
              &lt;/label&gt;
              &lt;label class="password"&gt;
                  &lt;span&gt;Password&lt;/span&gt;
                  &lt;input id="password" name="password" value="" type="password" placeholder="Password"&gt;
              &lt;/label&gt;
  
              &lt;button class="submit button" type="button"&gt;Sign in&lt;/button&gt;
              &lt;p&gt;&lt;a class="forgot" href="#"&gt;Forgot your password?&lt;/a&gt;&lt;/p&gt;        
          &lt;/fieldset&gt;    
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, I set up a very simple button, but I have no idea what to put in the onclick event handler. If this were a simple URL link, no problem. I would just write a jquery function (or even just a js function). But in the context of this code, I have no idea how to invoke it.</p>
  
  <pre><code>&lt;div id='login'&gt;
      &lt;button id='login-form' onclick="???"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm a little out of my depth with this one. Can someone point me in the right direction? Thanks!</p>
  
  <p>EDIT: There seems to be some confusion with what I am trying to accomplish, so let me explain. In the existing code, the href on the first line somehow invokes the code contained in the div with the id="login-box" on the next line. I want to achieve the same effect, just with a button instead of a text-based href. Unfortunately, I have never seen code written this way. It works correctly with the href, but I would prefer a button for aesthetic purposes.</p>
  
  <p>I tried this, but there is no response, other than from the console:</p>
  
  <pre><code>$('#login-form').on('click',function(){
      console.log("here");
      location.href='#login-box';
  });
  </code></pre>
  
  <p>Let me be clear: I know how to write a button that takes a user to a new web page. This is not taking a user to a new web page. It's a callback to the same html code invoking a different section of it. That's why it is confusing.</p>