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 = ``;
8
9
    const colorButton = `
10
        
11
            
12
            
13
                <div>
14
                    <div>
15
                        
16
                        
17
                    </div>
18
                <span>CHANGE NAME COLOR</span>
19
                </div>
20
            
21
        `;
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', () =&gt; {
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
}