JavaScript error: Uncaught TypeError: $(...).onclick is not a function
<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>