Как сделать так чтобы кнопка старт сначала было зеленой, но при нажатии становилсась ораньжевой, и чтобы это работало в разных браузерах

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 + "." + displayMilsec;
}

function startStop() {
  if (status === "stopped") {
    interval = window.setInterval(stopWatch, 100);
    document.getElementById("startStop").innerHTML = "Stop";
    status = "started";
  } else {
    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";
  }
}

<!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.0
    </div>
    <div class="buttons">
      <button class="a1" id="startStop" onclick="startStop()">Start</button>
    </div>
  </div>
</body>
</html>

Answer 1

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 + "." + displayMilsec;
}

function startStop() {
  if (status === "stopped") {
    interval = window.setInterval(stopWatch, 100);
    document.getElementById("startStop").innerHTML = "Stop";
    document.getElementById("startStop").style.background = 'orange';
    status = "started";
  } else {
    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    document.getElementById("startStop").style.background = 'green';
    status = "stopped";
  }
}

<!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.0
    </div>
    <div class="buttons">
      <button class="a1" id="startStop" onclick="startStop()" style="background: green">Start</button>
    </div>
  </div>
</body>
</html>

БЛОГ НА HUSL

Как сделать так чтобы кнопка старт сначала было зеленой, но при нажатии становилсась ораньжевой, и чтобы это работало в разных браузерах

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