10 examples of 'change button color onclick javascript' in JavaScript

Every line of 'change button color onclick javascript' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
3function setColor(btn, color) {
4 var count = 1;
5 var property = document.getElementById(btn);
6 if (count == 0) {
7 property.style.backgroundColor = "#FFFFFF"
8 count = 1;
9 } else {
10 property.style.backgroundColor = "#7FFF00"
11 count = 0;
12 }
13
14}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

433function SelectColor(btn) {
434 oldColor = $('.filter-gradient').attr('data-color');
435 newColor = $(btn).attr('data-color');
436
437 oldButton = $('#Demo').attr('data-button');
438 newButton = $(btn).attr('data-button');
439
440 $('.filter-gradient').removeClass(oldColor).addClass(newColor).attr('data-color',newColor);
441
442 $('#Demo').removeClass("btn-"+oldButton).addClass("btn-"+newButton).attr('data-button',newButton);
443
444 $('.carousel-indicators').removeClass("carousel-indicators-"+oldColor).addClass("carousel-indicators-"+newColor);
445
446 $('.card').removeClass("card-"+oldColor).addClass("card-"+newColor);
447
448 $('.selector').parent().removeClass('active');
449 $(btn).parent().addClass('active');
450}
98public set color(value: Color) {
99 _XTUIButton.xtr_setColor(value, this.objectRef);
100}
172change(_color) {
173 this.setState({ current: _color }, () => {
174 this.props.onChange(_color);
175 });
176}
7onClick(e) {
8 this.props.openColorPicker(e.target);
9}
55function changeBackgroundColor(color) {
56 var script = 'document.body.style.backgroundColor="' + color + '";';
57 // See https://developer.chrome.com/extensions/tabs#method-executeScript.
58 // chrome.tabs.executeScript allows us to programmatically inject JavaScript
59 // into a page. Since we omit the optional first argument "tabId", the script
60 // is inserted into the active tab of the current window, which serves as the
61 // default.
62 chrome.tabs.executeScript({
63 code: script
64 });
65}
4export default function colorButton()
5{
6 const colorIcon = chrome.extension.getURL('/icons/pencil-icon.png');
7 const colorImage = `<img src="${colorIcon}" alt="star" style="pointer-events: none; display: block; width: 80%; height:80%; margin-right: 2px;">`;
8
9 const colorButton = `
10 <iptv-color-button style="display: inline-block;" raised="" supported-cold-load-actions="[&quot;color&quot;]" wait-for-signal="watch-page-initialized" class="style-scope ytg-watch-footer x-scope iptv-color-button-0">
11 <iron-signals class="style-scope iptv-color-button"></iron-signals>
12 <paper-button style="color: #fff; background-color: #0f9d58; min-width: 0;" class="enabled style-scope iptv-color-button x-scope paper-button-0" role="button" tabindex="0" animated="" aria-disabled="false" elevation="1" raised="" aria-label="CHANGE NAME COLOR">
13 <div class="layout horizontal center-justified style-scope iptv-color-button">
14 <div style="width: 24px; height: 24px;" class="icon-container layout horizontal center-center style-scope iptv-color-button">
15 <yt-icon class="style-scope iptv-color-button x-scope yt-icon-0">
16 </yt-icon>
17 </div>
18 <iptv-formatted-string id="text" class="layout horizontal center-center style-scope iptv-color-button" style="margin: 0 3px"><span class="style-scope iptv-formatted-string">CHANGE NAME COLOR</span></iptv-formatted-string>
19 </div>
20 </paper-button>
21 </iptv-color-button>`;
22
23 $('.iptv-sponsor-button-0').after(colorButton);
24
25 $(colorButton).ready( function() {
26 $('.style-scope.iptv-color-button.x-scope.yt-icon-0').html(colorImage);
27 });
28
29 $('.style-scope.ytg-watch-footer.x-scope.iptv-color-button-0').on('click', () => {
30 window.open('https://www.iceposeidon.com/profile', '_blank');
31 $('.style-scope.ytg-watch-footer.x-scope.iptv-color-button-0 paper-button')[0].blur();
32 });
33};
31changeColor() {
32 this.penMode.emit();
33 this.openColors = true;
34
35 ga('send', 'event', ['Button'], ['Change Color'], ['Changing Color']);
36}
147function color(event) {
148 sketchpad.color = $(event.target).val();
149}
21onButtonClick() {
22 this.setState(oldState => ({ active: !oldState.active }));
23}

Related snippets