logo
down
shadow

change background color of specific button on click


change background color of specific button on click

By : user2956069
Date : November 22 2020, 10:54 AM
it fixes the issue Add $(this).css({ background: 'grey' }); after each button click to make it turn gray. Maybe something like this:
code :
$(document).ready(function() {

  $('#button-1').click(function() {
    $(this).css({
      background: 'grey'
    });
    $('#button-2').click(function() {
      $(this).css({
        background: 'grey'
      });
      $('#button-3').click(function() {
        $(this).css({
          background: 'grey'
        });
        $('#congrat-box').fadeIn(1200);
      });
    });
  });

});
.button {
  height: 30px;
  width: 30px;
  border-radius: 12px;
  background: blue;
  color: gold;
  border: 1px solid white;
  box-shadow: 0 0 3px grey;
}
#congrat-box {
  background: orange;
  font-size: 24px;
  line-height: 50px;
  padding: 20px;
  text-align: center;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="button-1" class="button">1</button>
<button id="button-2" class="button">2</button>
<button id="button-3" class="button">3</button>
<div id="congrat-box">Congrats!!!</div>


Share : facebook icon twitter icon
Custom button which will change text color, background color and drawable on click

Custom button which will change text color, background color and drawable on click


By : thenewgirl
Date : March 29 2020, 07:55 AM
should help you out Create three different xml selector and add them to the corresponding attributes..
Sample:
code :
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
      android:color="@color/click"/>

<item android:color="@color/normal"/>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
      android:color="@color/buttonBackgroundClick"/>

<item android:color="@android:color/transparent"/>
Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="My button"
   android:textColor="@drawable/textColor"
   android:drawableLeft="@drawable/btn_leftDrawable"
   android:background="@drawable/background"
/>
How to change the background color and text color with the click of a button in javascript?

How to change the background color and text color with the click of a button in javascript?


By : Benjamin Franklin Ol
Date : March 29 2020, 07:55 AM
Does that help I'm trying to change three different paragraphs into colors that are following the same theme but different(not apparent in example, just a test). I can't get them to change however. :( I'm also willing to use a JQuery way of doing it. , There is no getElementsById() method, only getElementById() without s
code :
var colorbox1 = document.getElementById('colorbox1');
var colorbox2 = document.getElementById('colorbox2');
var colorbox3 = document.getElementById('colorbox3');
how to change the background color of activity on button click where color is picked from radio button

how to change the background color of activity on button click where color is picked from radio button


By : Reagan Ripa's Vaitu
Date : March 29 2020, 07:55 AM
hop of those help? Change (getResources().getResourceTypeName(???) to (getResources().getColor(R.color.yourcolorname);
How to change div background color on button click?

How to change div background color on button click?


By : crazy folks2
Date : March 29 2020, 07:55 AM
like below fixes the issue Be careful when you're using id on the html tags, because it makes an automatic var declaration using the id. So, you're overriding the btnReset function with the btnReset pointing to the .
Solution 1: change the id="btnReset" or the function btnReset() name!
i want to change the background color of a button once clicked and change again to original color once i click another b

i want to change the background color of a button once clicked and change again to original color once i click another b


By : kode
Date : March 29 2020, 07:55 AM
This might help you This can be accomplished with a simple CSS rule and no JavaScript at all.
code :
.button { background-color:aqua; }  /* default color for all buttons */
.button:focus { background-color: rgba(255, 75, 75, .5); }
<div class="btn-group">
  <input type = "button" id="tab1" class="button" value ="button 1">
  <input type = "button" id="tab2" class="button" value ="button 2">
  <input type = "button" id="tab3" class="button" value ="button 3">
</div>
// Get all the relevant buttons into an array
var buttons = Array.prototype.slice.call(document.querySelectorAll(".button"));

// Loop through the buttons
buttons.forEach(function(btn){

  // Set up a click event handler for the button
  btn.addEventListener("click", function(){
    // Loop though all the buttons and reset the colors back to default
    buttons.forEach(function(btn){ btn.classList.remove("focus"); });
    this.classList.add("focus"); // Add the class to the one button that got clicked
  });
  
});
.button { background-color:aqua; }  /* default color for all buttons */
.focus { background-color: rgba(255, 75, 75, .5); }
<div class="btn-group">
  <input type = "button" id="tab1" class="button" value ="button 1">
  <input type = "button" id="tab2" class="button" value ="button 2">
  <input type = "button" id="tab3" class="button" value ="button 3">
</div>

<p>Other things to click on:
  <input type = "text" value ="button 1">
  <input type = "button" value ="button 2">
  <input type = "radio" value ="button 3">
</p>
Related Posts Related Posts :
  • TableTools plugin export buttons are not working
  • Prepopulate jquery token input textbox
  • Open a fancybox link with ajax
  • Getting jQuery and AngularJS content assist / auto-complete in eclipse for standalone HTML "file"
  • TR alternate background colour with unequal number of TD
  • DATATABLE jQuery TH and TD alignment
  • Jquery UI Convert Select's to Range Slider
  • Change text in text field according to link that has been clicked
  • Animate addClass + removeClass transitions?
  • knockout ajax call data-BIND
  • How do I create a variable with a number based on an element's number position using jquery?
  • Prevent fixed position element from flickering during jQuery animation
  • points are not visible clearly in nvd3 ghaph
  • How to write a regular expression for IP address format
  • Animate 3 DIVs from right to left when page is loading.
  • How to pivot columns in free jqgrid 4.15.4
  • the jquery method works fine but when made as a function not working
  • Show/hide text doesn't work when targeting link within div
  • multiple autocomplete search input fields
  • Display image in cell using Jquery jTable
  • jQuery and Wordpress - Scripts not working
  • flickering when mouse over, .hover() show/hide div(s)
  • Using Django's JSONResponseMixin to respond to AJAX requests
  • Unable to render charts using Wicked PDF
  • Style to dynamically created elements
  • hover not working for items in list
  • Keep server session alive automatically based on activity / input, using JQuery
  • jQuery load() taking a long time
  • Change / Exchange values in textboxes on text change in jquery
  • Unslider arrow code overriding slider options
  • what is the traditional way of sorting search results?
  • Do the action when the DIV comes in the display area of the browser with jQuery
  • jQuery slideshow overlapping CSS ribbon
  • JQuery animate function dont work
  • problems charts jquery highcharts
  • How to reset the select box values in Jquery sumoselect Multi select plugin
  • css absolute position on top of another element
  • How use jQuery String variable in html body
  • Get a row from table in view on modal bootstrap using codeigniter
  • How to make the effect of a div that covers an other div when scrolling?
  • Data binding using a button
  • How do i replace all dot in string to Underscore?
  • grab non-sibling element with jquery
  • Select a word and click it
  • Trigger modal instead redirect to /users/sign_in path, Rails 4 with devise
  • Combining Parent theme JS and CSS
  • Angular ui-grid - DropDown Selection shows Id
  • jquery addclass when there is content on body
  • JQUERY : CSS does not apply to dynamically created elements
  • Bootstrap multiselect dropdown checkbox not working on paginated table
  • JQuery scroll to dynamic id
  • Jquery first time tried ajax
  • Disable the link on the active tab (Bootstrap)
  • How to handle this validation when a div is added?
  • how to show/hide and check/uncheck checkboxes dynamically inside kendo grid
  • Conditional parameters for AJAX function
  • Jquery add class to input checkbox field
  • Bootstrap countdown timer Jquery
  • Open the closest modal of jQuery clicked element
  • Can I create link as post to 3rd party site and open in new tab?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org