как сделать чтобы кнопка при навидении меняла цвет после нажатия

Question

let milsec = 0;
let seconds = 0;
let minutes = 0;
let hours = 0;
let displayMilsec = 0;
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;
let interval = null;
let status = "stopped";
let start = document.getElementById("startStop");
function stopWatch() {
  milsec++;
  if (milsec / 10 === 1) {
    milsec = 0;
    seconds++;
    if (seconds / 60 === 1) {
      seconds = 0;
      minutes++;
      if (minutes / 60 === 1) {
        minutes = 0;
        hours++;
      }
    }
  }
  if (milsec < 10) {
    displayMilsec = milsec.toString();
  }
  if (seconds < 10) {
    displaySeconds = "0" + seconds.toString();
  } else {
    displaySeconds = seconds;
  }
  if (minutes < 10) {
    displayMinutes = "0" + minutes.toString();
  } else {
    displayMinutes = minutes;
  }
  if (hours < 10) {
    displayHours = "0" + hours.toString();
  } else {
    displayHours = hours;
  }
  document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;
}
function startStop() {
    if (status === "stopped") {
    interval = window.setInterval(stopWatch, 100);    
   document.getElementById("startStop").innerHTML = "Stop";
   document.getElementById("startStop").style.background = '#fca903';
   status = "started";
  } else {
      window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    document.getElementById("startStop").style.background = '#4beb23';
    status = "stopped";
  }
}

.a1 {
  background: #4beb23;
  cursor: pointer;
}
.a1:hover {
background: #40c71e;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stopwatch</title>
  <script type="text/javascript" src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div id="display">
      00:00:00
    </div>
    <div class="buttons">
      <button type="b1" class="a1" id="startStop" onclick="startStop()">Start</button>
    </div>
  </div>
  <script>
  </script>
</body>
</html>

Answer 1

После повторного нажатия на кнопку вы применяете стиль с помощью js: document.getElementById("startStop").style.background = '#4beb23';,

поэтому цвет задан в атрибуте style: <button type="b1" class="a1" id="startStop" onclick="startStop()" style="background: rgb(75, 235, 35);">Start</button> и поэтому стиль заданный CSS игнорируется. Нужно просто при повторном нажатии не применять цвет к объекту а очистить его атрибут style:

Так у вас после повторного нажатия: <button type="b1" class="a1" id="startStop" onclick="startStop()" style="background: rgb(75, 235, 35);">Start</button>

Так должно быть: <button type="b1" class="a1" id="startStop" onclick="startStop()" style="">Start</button>.

Это вроде должно сработать: document.getElementById("startStop").style = "";

Answer 2

Я бы убрал много лишнего и переделал бы с классами. К тому же постоянный document.getElementById нехорошая практика.

const button = document.querySelector('.start-stop')
button.addEventListener('click', () => {
  const isOn = button.classList.contains('on')
  if (isOn) {
    button.classList.remove('on')
    button.textContent = 'Start'
    // ... Выключаем часы
  } else {
    button.classList.add('on')
    button.textContent = 'Stop'
    // ... Включаем часы
  }
})

.start-stop {
  background-color: aquamarine;
}

.start-stop:not(.on):hover {
  background-color: rgb(3, 202, 136);
}

.on {
  background-color: rgb(255 17 0);
}

.on:hover {
  background-color: rgb(255 191 186);
}

<button class="start-stop">Start</button>

БЛОГ НА HUSL

как сделать чтобы кнопка при навидении меняла цвет после нажатия

Ответы (2 шт):