title: JavaScript error: Uncaught TypeError: $(...).onclick is not a function
body: <p>I am beginner and I got an error on my JavaScript.</p>
  <p><strong>JavaScript:</strong></p>
  <pre><code>$(function(){
      $(&quot;.widgetselecterbtn&quot;).onclick(function(){
          var index = $(&quot;.widgetselecterbtn&quot;).index(this);
          $('.itemselected').addClass('hide');
          $('.itemselected').eq(index).removeClass('hide');
      });
  });
  </code></pre>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;ul id=&quot;wighet&quot;&gt;
      &lt;li&gt;&lt;div&gt;&lt;i class=&quot;fa fa-header fa-lg&quot;&gt;&lt;/i&gt;&lt;br&gt;&lt;a class=&quot;widgetselecterbtn&quot;&gt;heading&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div&gt;&lt;i class=&quot;fa fa-pencil fa-lg&quot;&gt;&lt;/i&gt;&lt;br&gt;&lt;a  class=&quot;widgetselecterbtn&quot;&gt;text&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div&gt;&lt;i class=&quot;fa fa-youtube fa-lg&quot;&gt;&lt;/i&gt;&lt;br&gt;&lt;a class=&quot;widgetselecterbtn&quot;&gt;Youtube&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div&gt;&lt;i class=&quot;fa fa-quote-left fa-lg&quot;&gt;&lt;/i&gt;&lt;br&gt;&lt;a class=&quot;widgetselecterbtn&quot;&gt;quate&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div&gt;&lt;i class=&quot;fa fa-link fa-lg&quot;&gt;&lt;/i&gt;&lt;br&gt;&lt;a class=&quot;widgetselecterbtn&quot;&gt;link&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div&gt;&lt;i class=&quot;fa fa-picture-o fa-lg&quot;&gt;&lt;/i&gt;&lt;br&gt;&lt;a class=&quot;widgetselecterbtn&quot;&gt;image&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div&gt;&lt;i class=&quot;fa fa-twitter fa-lg&quot;&gt;&lt;/i&gt;&lt;br&gt;&lt;a class=&quot;widgetselecterbtn&quot;&gt;Twitter&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class=&quot;ItemWidget01 itemselected hide&quot;&gt;                 
  &lt;/div&gt;
  &lt;div class=&quot;ItemWidget01 itemselected hide&quot;&gt;            
  &lt;/div&gt;
  &lt;div class=&quot;ItemWidget01 itemselected hide&quot;&gt;            
  &lt;/div&gt;
  &lt;div class=&quot;ItemWidget01 itemselected hide&quot;&gt;                 
  &lt;/div&gt;
  &lt;div class=&quot;ItemWidget01 itemselected hide&quot;&gt;                
  &lt;/div&gt;
  &lt;div class=&quot;ItemWidget01 itemselected hide&quot;&gt;                
  &lt;/div&gt;
  &lt;div class=&quot;ItemWidget01 itemselected hide&quot;&gt;                  
  &lt;/div&gt;
  </code></pre>
  <p>The error is</p>
  <blockquote>
  <p>Uncaught TypeError: $(...).onclick is not a function</p>
  </blockquote>
  <p>How can I solve this?</p>