title: showing record text with red color when click stop button
body: <p>I have a question regarding html, css, javascript.</p>
  <p>I've made a game in which numbers must be pressed in order.</p>
  <p>And I have to show the record time with red color when I click the stop button in the middle of the game.
  like this...
  <a href="https://i.stack.imgur.com/zUKAi.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Also I've got hints.</p>
  <ol>
  <li>Use the code</li>
  </ol>
  <pre><code>newP.className = &quot;stopped&quot;;
  </code></pre>
  <ol start="2">
  <li>CSS selector by class name</li>
  <li>Create div(division): Game success, Game stop</li>
  </ol>
  <p>Here's my full code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var answer = 0;
  
  function start() {
    startTime = new Date().getTime();
    toggleButton = document.getElementById("toggle_button");
    toggleButton.innerHTML = "Stop";
    toggleButton.onclick = stop;
  
    init();
  
    timer = setInterval(function() {
      now = new Date().getTime();
      seconds = now - startTime;
      document.getElementById("time").innerHTML = displayTime(seconds);
    }, 60);
  }
  
  function stop() {
    clearInterval(timer);
    toggleButton = document.getElementById("toggle_button");
    toggleButton.innerHTML = "Start";
    toggleButton.onclick = start;
  }
  
  function btnClick(num) {
    btns = document.getElementsByClassName("btn");
    if (num == answer) { 
      answer = answer+1;
      btns[num].disabled = true;
      if (num == 8) { 
        stop();
        score = document.getElementById("time").innerHTML;
        newP = document.createElement("p");
        newP.appendChild(document.createTextNode(score));
        document.getElementById("score_board").appendChild(newP);
      }
    } else { 
      init();
    }
  }
  
  function init() {
    answer = 0;
  
    btns = document.getElementsByClassName("btn");
    for (let index=0; index&lt;btns.length; index++) {
      btns[index].disabled = false;
      btns[index].innerHTML = index;
    }
  }
  
  function displayTime (seconds) {
    m = String(Math.floor(seconds / 1000 / 60));
    s = String(Math.floor((seconds / 1000) % 60));
    ms = String(Math.floor(seconds % 100));
    return m.padStart(2, '0') + ":" + s.padStart(2, '0') + ":" + ms.padStart(2, '0');
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn {
    width:60px;
    height:60px;
    font-size:18px;
    margin:2px;
  } /*select by class */
  
  #toggle_button {
    width:120px;
    background-color:#000;
    color:#fff;
    height:24px;
    border:none;
  }
  
  #time {
    font-size:20px;
    font-weight:bold;
  } /*select by id */
  
  img {
    width:100px;
  } /*select by html elemnt */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;center&gt;
    &lt;p id="time"&gt;00:00:00&lt;/p&gt;
    &lt;button id="toggle_button" onclick="start()"&gt;Start&lt;/button&gt;
    &lt;br /&gt;&lt;br /&gt;
  
    &lt;button id="button_1" class="btn" onclick="btnClick(0)" disabled&gt;?&lt;/button&gt;
    &lt;button id="button_2" class="btn" onclick="btnClick(1)" disabled&gt;?&lt;/button&gt;
    &lt;button id="button_3" class="btn" onclick="btnClick(2)" disabled&gt;?&lt;/button&gt;&lt;br /&gt;
    &lt;button id="button_4" class="btn" onclick="btnClick(3)" disabled&gt;?&lt;/button&gt;
    &lt;button id="button_5" class="btn" onclick="btnClick(4)" disabled&gt;?&lt;/button&gt;
    &lt;button id="button_6" class="btn" onclick="btnClick(5)" disabled&gt;?&lt;/button&gt;&lt;br /&gt;
    &lt;button id="button_7" class="btn" onclick="btnClick(6)" disabled&gt;?&lt;/button&gt;
    &lt;button id="button_8" class="btn" onclick="btnClick(7)" disabled&gt;?&lt;/button&gt;
    &lt;button id="button_9" class="btn" onclick="btnClick(8)" disabled&gt;?&lt;/button&gt;
  
    &lt;div id="score_board"&gt;
      &lt;p&gt;&lt;strong&gt;Score Board&lt;/strong&gt;&lt;p&gt;
    &lt;/div&gt;
  &lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Sorry for bad English since I'm not a native speaker.
  Thank you so much...!</p>