I want to change button's color when clicked with jquery code

Question

I want to change rating button's color when it is clicked. But JQuery code is not working.enter image description here

$(".vote").on("click",function(){
    alert("a");  //test
    $(this).css("backgroundColor","hsl(216, 12%, 54%)");
});

<div class="rating">
  <button class="vote">1</button>
  <button class="vote">2</button>
  <button class="vote">3</button>
  <button class="vote">4</button>
  <button class="vote">5</button>
</div>

More importantly: `ReferenceError: $ is not defined` (remember to include jQuery). — David Thomas, Aug 02 '22 at 19:29
It works perfectly with jQuery: [JS Fiddle demo](https://jsfiddle.net/davidThomas/07sangkb/), so your attempted inclusion of jQuery appears to have failed, or you somehow forgot, or didn't clear/refresh the cached file that include(s|d) jQuery. — David Thomas, Aug 02 '22 at 19:31
So what's different in your code that isn't in your question? What does `console.log($)` display in your browser console? — David Thomas, Aug 02 '22 at 20:00
// The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery… — İrem Çağın, Aug 02 '22 at 20:09
Im including JQuery like in this question's answer. https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined. But still not working — İrem Çağın, Aug 02 '22 at 20:13

score 0 · Answer 1 · answered Aug 02 '22 at 19:29

Your code works when JQuery is referenced.

$(".vote").on("click",function(){
    alert("a");  //test
    $(this).css("backgroundColor","hsl(216, 12%, 54%)");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rating">
  <button class="vote">1</button>
  <button class="vote">2</button>
  <button class="vote">3</button>
  <button class="vote">4</button>
  <button class="vote">5</button>
</div>

I want to change button's color when clicked with jquery code

1 Answers1