showing record text with red color when click stop button

Question

I have a question regarding html, css, javascript.

I've made a game in which numbers must be pressed in order.

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... enter image description here

Also I've got hints.

1. Use the code

newP.className = "stopped";

2. CSS selector by class name
3. Create div(division): Game success, Game stop

Here's my full 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<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'); };

 .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 */

 <center> <p id="time">00:00:00</p> <button id="toggle_button" onclick="start()">Start</button> <br /><br /> <button id="button_1" class="btn" onclick="btnClick(0)" disabled>?</button> <button id="button_2" class="btn" onclick="btnClick(1)" disabled>?</button> <button id="button_3" class="btn" onclick="btnClick(2)" disabled>?</button><br /> <button id="button_4" class="btn" onclick="btnClick(3)" disabled>?</button> <button id="button_5" class="btn" onclick="btnClick(4)" disabled>?</button> <button id="button_6" class="btn" onclick="btnClick(5)" disabled>?</button><br /> <button id="button_7" class="btn" onclick="btnClick(6)" disabled>?</button> <button id="button_8" class="btn" onclick="btnClick(7)" disabled>?</button> <button id="button_9" class="btn" onclick="btnClick(8)" disabled>?</button> <div id="score_board"> <p><strong>Score Board</strong><p> </div> </center>

Sorry for bad English since I'm not a native speaker. Thank you so much...!

Answer 1

Following piece of code is the change in the stop function. If stop function has a parameter the color is gonna be red. When user press the stop button, html send press action as a parameter. But when the game is completed the function is called without parameter. Thus you could show score as red when user break the game and black when user complete the game.

const scoreBoard = document.querySelector('#score_board');
const score = document.getElementById("time").innerHTML;
const scoreEl = document.createElement('p');
if(c) scoreEl.style.color = 'red';
const node = document.createTextNode(score);
scoreEl.appendChild(node);
scoreBoard.appendChild(scoreEl);

Here is the example:

 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(c) { clearInterval(timer); const scoreBoard = document.querySelector('#score_board'); const score = document.getElementById("time").innerHTML; const scoreEl = document.createElement('p'); if(c) scoreEl.style.color = 'red'; const node = document.createTextNode(score); scoreEl.appendChild(node); scoreBoard.appendChild(scoreEl); 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(); } } else { init(); } } function init() { answer = 0; btns = document.getElementsByClassName("btn"); for (let index=0; index<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'); };

 .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 */

 <center> <p id="time">00:00:00</p> <button id="toggle_button" onclick="start()">Start</button> <br /><br /> <button id="button_1" class="btn" onclick="btnClick(0)" disabled>?</button> <button id="button_2" class="btn" onclick="btnClick(1)" disabled>?</button> <button id="button_3" class="btn" onclick="btnClick(2)" disabled>?</button><br /> <button id="button_4" class="btn" onclick="btnClick(3)" disabled>?</button> <button id="button_5" class="btn" onclick="btnClick(4)" disabled>?</button> <button id="button_6" class="btn" onclick="btnClick(5)" disabled>?</button><br /> <button id="button_7" class="btn" onclick="btnClick(6)" disabled>?</button> <button id="button_8" class="btn" onclick="btnClick(7)" disabled>?</button> <button id="button_9" class="btn" onclick="btnClick(8)" disabled>?</button> <div id="score_board"> <p><strong>Score Board</strong><p> </div> </center>