How to add lap functionality in stopwatch using Javascript?

I am working on a stopwatch and basically I have all done but I don’t know how to add the lapping functionality. I want that as soon as the user clicks on the lap button, a new lap gets added on a “new line”. However I am not able to do that here is my code:

let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;

let displayMilisec = miliseconds;
let displaySec = seconds;
let displayMins = minutes;
let displayHours = hours; 

let interval = null;

let status = "stopped";

let laps = null;
let lapNow = null;

function start() {
      miliseconds++;

      if (miliseconds < 10){
            displayMilisec = "0" + miliseconds.toString();
      }
      else {
            displayMilisec = miliseconds;
      }
      
      if(seconds < 10) {
            displaySec = "0" + seconds.toString();
      }
      else {
            displaySec = seconds;
      }
      
      if(minutes < 10) {
            displayMins = "0" + minutes.toString();
      }
      else {
            displayMins = minutes;
      }
      
      if(hours < 10) {
            displayHours = "0" + hours.toString();
      }
      else {
            displayHours = hours;
      }

      if (miliseconds / 100 === 1) {
            seconds++;
            miliseconds = 0;
            if (seconds / 60 === 1) {
                  minutes++;
                  seconds = 0;
                  if (minutes / 60 === 1) {
                        hours++;
                        minutes = 0;
                  }
            }
      }



      document.getElementById("timerMilisec").innerHTML = displayMilisec;
      document.getElementById("timerSec").innerHTML = displaySec;
      document.getElementById("timerMins").innerHTML = displayMins;
      document.getElementById("timerHrs").innerHTML = displayHours;

}

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

function reset() {
      window.clearInterval(interval);
      miliseconds = 0;
      seconds = 0;
      minutes = 0;
      hours = 0;
      document.getElementById("timerMilisec").innerHTML = "00";
      document.getElementById("timerSec").innerHTML = "00";
      document.getElementById("timerMins").innerHTML = "00";
      document.getElementById("timerHrs").innerHTML = "00";
      document.getElementById('startBtn').innerHTML = "Start";
      status = "stopped";
}

function lap() {

      lapNow = hours + " : " + minutes + " : " + seconds + " : " + miliseconds; 
      laps = document.getElementById('lapRecord').innerHTML + lapNow;

      document.getElementById('lapRecord').innerHTML = laps;
}
body {
        height: 100vh;
        margin: 40px 0px 0px 0px;
        background-color: #58e065;
        display: flex;
        justify-content: center;
        overflow: hidden;
}

.display {
        display: flex;
        left: 50%;
        align-items: center;
        justify-content: center;
        font-family: "nunito","poppins", sans-serif;
        font-weight: 700;
        font-size: 60px;
        color: white;
        text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
}

p {
        margin: 5px;
}

.buttons {
        display: flex;
        justify-content: center;
}

button {
        cursor: pointer;
        height: 30px;
        width: 80px;
        border: none;
        outline: none;
        border-radius: 4px;
        background-color: #3b85ed;
        font-family: "nunito","poppins", sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: white;
        box-shadow: 3px 3px 0px #224f8f;
        margin: 4px;
}
button:hover {
        background-color: #224f8f;
}

h1 {
        position: sticky;
        background-color: #ff961d;
        display: flex;
        justify-content: center;
        margin: 30px;
        font-family: "nunito", "poppins", sans-serif;
        font-size: 40px;
        font-weight: 700;
        color: white;
        text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
        border-radius: 10px;
        box-shadow: 3px 3px 0px rgb(179, 101, 0);
}

#header {
        width: 100%;
        height: 100px;
        position: sticky;
}

#laps {
        margin-top: 40px;
        height: 400px;
        scroll-behavior: smooth;
}
<div class="wrapper" id="wrapper">
                <div class="display">
                        <p class="timerDisplay" id="timerHrs">00</p> :
                        <p class="timerDisplay" id="timerMins">00</p> :
                        <p class="timerDisplay" id="timerSec">00</p> :
                        <p class="timerDisplay" id="timerMilisec">00</p>
                </div>

                <div class="buttons">
                        <button type="button" id="startBtn" onclick="startStop()">Start</button>
                        <button type="button" id="resetBtn" onclick="reset()">Reset</button>
                        <button type="button" id="lapBtn">Lap</button>
                </div>

                <h1>Laps:</h1>

                <div id="laps">
                        <p id="lapRecord">

                        </p>
                </div>
        </div>
I have used a very bad method to do this but yeah I will definitely improve it as soon as know how to add that lap function. I would appreciate an explanation of your code as I just a beginner to coding and I don’t know much still. Thank you so much for reading my questions.

Answer

Well then, I’ve edited the code and implemented the lap functionality. Here’s what I did.

I would advice you stop using inline html event listeners (onclick). So I replaced all the onclicks with addEventListener('click')

Selecting elements from the DOM is heavy on the performance of your document, so I assigned all the ids to a variable, because these elements were used a lot.

In the lap function, I used template stings to concatenate the time together, and wrapped them in a <div></div> tag with a class of lap in case you want to style the laps later.

I also removed curly braces ({ }) around one-line ifelse statements to reduce the number of lines in the code.

You can test it out here in the snippet. 🙂

const lapBtn = document.getElementById('lapBtn');
const timerMilliSec = document.getElementById('timerMilliSec');
const timerSec = document.getElementById('timerSec');
const timerMins = document.getElementById('timerMins');
const timerHrs = document.getElementById('timerHrs');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const lapRecord = document.getElementById('lapRecord');

let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;

let displayMilisec = miliseconds;
let displaySec = seconds;
let displayMins = minutes;
let displayHours = hours;

let interval = null;

let status = "stopped";

let lapNow = null;

function start() {
  miliseconds++;

  if (miliseconds < 10) displayMilisec = "0" + miliseconds.toString();
  else displayMilisec = miliseconds;

  if (seconds < 10) displaySec = "0" + seconds.toString();
  else displaySec = seconds;

  if (minutes < 10) displayMins = "0" + minutes.toString();
  else displayMins = minutes;

  if (hours < 10) displayHours = "0" + hours.toString();
  else displayHours = hours;

  if (miliseconds / 100 === 1) {
    seconds++;
    miliseconds = 0;

    if (seconds / 60 === 1) {
      minutes++;
      seconds = 0;

      if (minutes / 60 === 1) {
        hours++;
        minutes = 0;
      }
    }
  }



  timerMilisec.innerHTML = displayMilisec;
  timerSec.innerHTML = displaySec;
  timerMins.innerHTML = displayMins;
  timerHrs.innerHTML = displayHours;

}

function startStop() {
  if (status === "stopped") {
    interval = setInterval(start, 10);
    startBtn.innerHTML = "Stop";
    status = "started";
  } else {
    clearInterval(interval);
    startBtn.innerHTML = "Start";
    status = "stopped";
  }
}

function reset() {
  clearInterval(interval);
  miliseconds = 0;
  seconds = 0;
  minutes = 0;
  hours = 0;
  timerMilisec.innerHTML = "00";
  timerSec.innerHTML = "00";
  timerMins.innerHTML = "00";
  timerHrs.innerHTML = "00";
  startBtn.innerHTML = "Start";
  lapRecord.innerHTML = '';
  status = "stopped";
}

function lap() {
  lapNow = `<div class="lap">${hours} : ${minutes} : ${seconds} : ${miliseconds}</div>`;
  lapRecord.innerHTML += lapNow;
}

lapBtn.addEventListener('click', lap);
startBtn.addEventListener('click', startStop);
resetBtn.addEventListener('click', reset);
body {
  height: 100vh;
  margin: 40px 0px 0px 0px;
  background-color: #58e065;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.display {
  display: flex;
  left: 50%;
  align-items: center;
  justify-content: center;
  font-family: "nunito", "poppins", sans-serif;
  font-weight: 700;
  font-size: 60px;
  color: white;
  text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
}

p {
  margin: 5px;
}

.buttons {
  display: flex;
  justify-content: center;
}

button {
  cursor: pointer;
  height: 30px;
  width: 80px;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #3b85ed;
  font-family: "nunito", "poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: white;
  box-shadow: 3px 3px 0px #224f8f;
  margin: 4px;
}

button:hover {
  background-color: #224f8f;
}

h1 {
  position: sticky;
  background-color: #ff961d;
  display: flex;
  justify-content: center;
  margin: 30px;
  font-family: "nunito", "poppins", sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: white;
  text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
  border-radius: 10px;
  box-shadow: 3px 3px 0px rgb(179, 101, 0);
}

#header {
  width: 100%;
  height: 100px;
  position: sticky;
}

#laps {
  margin-top: 40px;
  height: 400px;
  scroll-behavior: smooth;
}
<div class="wrapper" id="wrapper">
  <div class="display">
    <p class="timerDisplay" id="timerHrs">00</p> :
    <p class="timerDisplay" id="timerMins">00</p> :
    <p class="timerDisplay" id="timerSec">00</p> :
    <p class="timerDisplay" id="timerMilisec">00</p>
  </div>

  <div class="buttons">
    <button type="button" id="startBtn">Start</button>
    <button type="button" id="resetBtn">Reset</button>
    <button type="button" id="lapBtn">Lap</button>
  </div>

  <h1>Laps:</h1>

  <div id="laps">
    <p id="lapRecord"></p>
  </div>
</div>