jquery change button color onclick

Question

I have multiple buttons that I use when people answer a question  How would I get the buttons to change colors when a person clicks on the button  I do not know jquery  I have been told that it is the best thing to use for this  Here is the code I have for the html part    lt div style  text-align  center   gt  lt span style  line-height  18px  font-family  Arial  Helvetica  sans-serif  font-size  24px   gt In the past three months  how often have you used marijuana  lt br   gt   lt p gt  lt input type  submit  value   Never   name  btnsubmit  id  answer  style  width  200px     gt  lt  p gt   lt p gt  lt input type  submit  value   Once or Twice   name  btnsubmit  id  answer  style  width  200px     gt  lt  p gt   lt p gt  lt input type  submit  value   Monthly   name  btnsubmit  id  answer  style  width  200px     gt  lt  p gt   lt p gt  lt input type  submit  value   Daily or Almost Daily   name  btnsubmit  id  answer  style  width  200px     gt  lt  p gt   lt  span gt  lt  div gt   lt div gt   lt p style  text-align  right   gt  lt a onclick  window open this href   parent   return false   href   mobile Static2 aspx  gt  lt input type  submit  value   Next   name  btnsubmit  style  width  100px     gt  lt  a gt  lt  p gt   lt  div gt    I am really new at coding so any kind of help would be appreciated

User · Answer

I would just create a separate CSS class:

.ButtonClicked {
    background-color:red;
}

And then add the class on click:

$('#ButtonId').on('click',function(){
    !$(this).hasClass('ButtonClicked') ? addClass('ButtonClicked') : '';
});

This should do what you're looking for, showing by this jsFiddle. If you're curious about the logic with the ? and such, its called ternary (or conditional) operators, and its just a concise way to do the simple if logic to check if the class has already been added.

You can also create the ability to have an "on/off" switch feel by toggling the class:

$('#ButtonId').on('click',function(){
    $(this).toggleClass('ButtonClicked');
});

Shown by this jsFiddle. Just food for thought.

User · Answer

Add this code to your page    lt script type  text javascript  gt    document  ready function           input type  submit     click function            this  css  background-color   red                 lt  script gt

User · Answer

input type  submit     click function      this  css  color   red          Use class  Demo - http   jsfiddle net BX6Df         input type  submit     click function                this  addClass  red          if you want to toggle the color each click  you can try this - http   jsfiddle net SMNks      input type  submit     click function        this  toggleClass  red           red       background-color red      Updated answer for your comment    http   jsfiddle net H2Xhw      input type  submit     click function           input type  submit   red   removeClass  red             this  addClass  red

User · Answer

You have to include the jquery framework in your document head from a cdn for example    lt script src    ajax googleapis com ajax libs jquery 1 9 1 jquery min js  type  text javascript  gt  lt  script gt    Then you have to include a own script for example    function             document  ready function             input   click function                 this  css  background-color    green                        window  load function                 jQuery      This part is a mapping of the   to jQuery  so actually it is jQuery  selector   function      function             jQuery      Here you can find die api of jquery where all functions are listed with examples and explanation  http   api jquery com

User · Answer

Use css    lt style gt  input name btnsubmit  active   color  green     lt  style gt

[jquery] jquery change button color onclick

Examples related to jquery

Examples related to html

Examples related to css

Examples related to button

Examples related to dotnetnuke