title: simple onclick function on button not working
body: <p>I am trying to change the class of a button when clicking on it. Why isn't mine working:
  see my <a href="http://jsfiddle.net/VUmza/20/" rel="nofollow">fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id="repeatMon" onclick="changeStyle()"&gt;&lt;span&gt; Mon &lt;/span&gt;&lt;/button&gt; 
  &lt;br/&gt;
  &lt;button id="repeatTues" data-bind="checked: repeatTues" onclick="changeStyle()"&gt;&lt;span&gt; Tues &lt;/span&gt;&lt;/button&gt; 
  &lt;br/&gt;
  &lt;button id="repeatWeds" data-bind="checked: repeatWeds" onclick="changeStyle()"&gt;&lt;span&gt; Weds &lt;/span&gt;&lt;/button&gt; 
  &lt;br/&gt;
  &lt;button id="repeatThurs" data-bind="checked: repeatThurs" onclick="changeStyle()"&gt;&lt;span&gt; Thurs &lt;/span&gt;&lt;/button&gt; 
  &lt;br/&gt;
  &lt;button id="repeatFri" data-bind="checked: repeatFri" onclick="changeStyle()"&gt;&lt;span&gt; Fri &lt;/span&gt;&lt;/button&gt; 
  &lt;br/&gt;
  &lt;button id="repeatSat" data-bind="checked: repeatSat" onclick="changeStyle()"&gt;&lt;span&gt; Sat &lt;/span&gt;&lt;/button&gt; 
  &lt;br/&gt;
  &lt;button id="repeatSun" data-bind="checked: repeatSun" onclick="changeStyle()"&gt;&lt;span&gt; Sun &lt;/span&gt;&lt;/button&gt; 
  &lt;br/&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>button{
      width: 60px;
      height: 35px;
      border-radius: 0px;
      color: #cfcfcf;
      background: #0a4a58;
  }
  
  .active{
      color: #fff;
      background: ##02AEFF;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>function changeStyle(){
      $(this).toggleClass('active');
  }
  </code></pre>
  
  <p>thank you!</p>