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

3
function 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
}

433
function 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
}

98
public set color(value: Color) {
99
    _XTUIButton.xtr_setColor(value, this.objectRef);
100
}

172
change(_color) {
173
  this.setState({ current: _color }, () => {
174
    this.props.onChange(_color);
175
  });
176
}

7
onClick(e) {
8
	this.props.openColorPicker(e.target);
9
}

55
function 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
}

4
export 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
};

31
changeColor() {
32
  this.penMode.emit();
33
  this.openColors = true;
34
35
  ga('send', 'event', ['Button'], ['Change Color'], ['Changing Color']);
36
}

147
function color(event) {
148
  sketchpad.color = $(event.target).val();
149
}

21
onButtonClick() {
22
  this.setState(oldState => ({ active: !oldState.active }));
23
}