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

You have to include the jquery framework in your document head from a cdn for example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

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

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

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

[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