JavaScript error: Uncaught TypeError: $(...).onclick is not a function
I am beginner and I got an error on my JavaScript.
JavaScript:
$(function(){
$(".widgetselecterbtn").onclick(function(){
var index = $(".widgetselecterbtn").index(this);
$('.itemselected').addClass('hide');
$('.itemselected').eq(index).removeClass('hide');
});
});
HTML:
<ul id="wighet">
<li><div><i class="fa fa-header fa-lg"></i><br><a class="widgetselecterbtn">heading</a></div></li>
<li><div><i class="fa fa-pencil fa-lg"></i><br><a class="widgetselecterbtn">text</a></div></li>
<li><div><i class="fa fa-youtube fa-lg"></i><br><a class="widgetselecterbtn">Youtube</a></div></li>
<li><div><i class="fa fa-quote-left fa-lg"></i><br><a class="widgetselecterbtn">quate</a></div></li>
<li><div><i class="fa fa-link fa-lg"></i><br><a class="widgetselecterbtn">link</a></div></li>
<li><div><i class="fa fa-picture-o fa-lg"></i><br><a class="widgetselecterbtn">image</a></div></li>
<li><div><i class="fa fa-twitter fa-lg"></i><br><a class="widgetselecterbtn">Twitter</a></div></li>
</ul>
<div class="ItemWidget01 itemselected hide">
</div>
<div class="ItemWidget01 itemselected hide">
</div>
<div class="ItemWidget01 itemselected hide">
</div>
<div class="ItemWidget01 itemselected hide">
</div>
<div class="ItemWidget01 itemselected hide">
</div>
<div class="ItemWidget01 itemselected hide">
</div>
<div class="ItemWidget01 itemselected hide">
</div>
The error is
Uncaught TypeError: $(...).onclick is not a function
How can I solve this?
onclick
is not a jQuery function. You should use click
instead.
$(".widgetselecterbtn").click(function() {
//do your task here
});