Изменение цвета кнопки HTML в JavaScript

Question

У меня есть функция javascript для изменения внутреннего HTML кнопки в соответствии с функцией.

Javascript

function event_click_startpause( event ){
              if( interval === null ){
                  start();
                  event.target.innerText = 'pause';}
              else {
                  pause();
                  event.target.innerText = 'Resume';}
                  }
              function start(){
                 pause();
                 interval = setInterval( count, 1000 );
              function pause() {
                 clearInterval( interval );
                 interval = null; }
                                        }

HTML

<button id="pause" class="pause">Pause</button>

CSS

.pause{
background: #c1580b;
color: #ffb734;
width: 70px;
height: 70px;
line-height: 70px;
display: block;
border-radius: 50%;
text-align: center;
text-decoration:none;
border:2px solid #000;
box-shadow: 0px 0px 0px 3px #c1580b;
font-size: medium;
}

Итак, как мне изменить цвет фона кнопки на зеленый при изменении внутреннего HTML-кода кнопки на «возобновить»?

Answer 1

См. https://jsfiddle.net/xb0yncj7/1/ -

var interval = null;
var count = function() {};

window.event_click_startpause = function(btn) {
    if (interval === null) {
        start();
        btn.innerText = 'pause';
        btn.style.backgroundColor = "#F00"
    } else {
        pause();
        btn.innerText = 'Resume';
        btn.style.backgroundColor = "#0F0";
    }

    function start() {
        pause();
        interval = setInterval(count, 1000);

    }

    function pause() {
        clearInterval(interval);
        interval = null;
    }
}

Answer 2

Хотя это не ясно из вашего JS выше, предполагая, что у вас есть хранилище кнопок как элемент DOM в JS, вы можете использовать метод style, связанный с выбранным вами свойством:

event.target.style.backgroundColor = 'green'

Примечание: свойства вызываются через camelCase

Answer 3

let pauseButton = document.getElementById('pause');    
pauseButton.classList.add('green');

и на свой стиль добавь

.pause.green {
    background: green;
}

или используйте

let pauseButton = document.getElementById('pause');
pauseButton.style.background = 'green';

Answer 4

Вы можете изменить цвет фона

 event.target.css('background-color','#ff00ff');