how i am going to clearInterval when i press stop btn? – Blancer.com Tutorials and projects

i am truly new with programing with javaScript so i just start to learn it, it will be good you are going to reply using a simple js code
my code does’nt stop when i press stop i want to clear the interval that i named with myTimer if i didn’t put setInterval inside the function it just work directly and if there is any way to make my code more short please mentiot it.

const // my variable
  myHour = document.getElementById("hours"),
  myMin = document.getElementById("min"),
  mySecond = document.getElementById("second"),
  myMiliSecond = document.getElementById("dsecond"),
  startchrono = document.getElementById("start"),
  getLap = document.getElementById("lap"),
  stopchrono = document.getElementById("stop"),
  resetchrono = document.getElementById("reset"),
  result = document.getElementById("result");
let // variable
  milisecond = 0,
  second = 0,
  minute = 0,
  hour = 0,
  chronoRun = false,
  round = 0;

function decoration(item) // this function is for add 0 if second or minute less than 10
  {
  if (String(item).length < 2) {
    item = "0" + item;
  }
  return item;
}

function lapset() // function that create a new row in the table to save rounds
 {
  round++;
  let // decoration add 0 if number under 10
    ds = decoration(milisecond),
    s = decoration(second),
    m = decoration(minute),
    h = decoration(hour);
  if (round <= 10) {
    const // insert the row in table
      tr = result.insertRow(-1);
    tr.insertCell(0).innerHTML = round;
    tr.insertCell(-1).innerHTML = h + ":" + m + ":" + s + ":" + ds;
  } else if (round <= 11) {
    tr = result.insertRow(-1);
    tr.insertCell(-0).innerHTML = "-";
    tr.insertCell(-1).innerHTML = "you can't add any more laps";
    getLap.setAttribute("disabled", "true");
  }
}

function chrono() //chrono start 
  {
  // chrono
  milisecond++;

  // make sure that minute, second have to be less than 60
  if (milisecond > 10) {
    milisecond = 0;
    second++;
  }
  if (second > 59) {
    second = 0;
    minute++;
  }
  if (minute > 59) {
    minute = 0;
    hour++;
  }
  let // decoration add 0 if number under 10
    ds = decoration(milisecond),
    s = decoration(second),
    m = decoration(minute),
    h = decoration(hour);

  myMiliSecond.innerHTML = ds;
  mySecond.innerHTML = s;
  myMin.innerHTML = m;
  myHour.innerHTML = h;
  startchrono.setAttribute("disabled", "true");
}
// function chronoStarts() {}
const myTimer = () => {
  setInterval(chrono, 100);
};

const test = () => {
  return clearInterval(myTimer);
};
startchrono.addEventListener("click", myTimer);
getLap.addEventListener("click", lapset);
stopchrono.addEventListener("click", test);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="chrono">
      <div id="timer">
        <span id="hours" class="time">00</span>
        <span class="sep">:</span>
        <span id="min" class="time">00</span>
        <span class="sep">:</span>
        <span id="second" class="time">00</span>
        <span class="sep">:</span>
        <span id="dsecond" class="time">00</span>
      </div>
      <div id="btnarea">
        <button id="start" class="btnevent">start</button>
        <button id="lap" class="btnevent">lap</button>
        <button id="stop" class="btnevent">stop</button>
        <button id="reset" class="btnevent">reset</button>
      </div>
      <table id="result">
        <caption>saved lap</caption>
        <tbody>
          <tr>
            <th class="round">round</th>
            <th class="laptime">time</th>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="newpagescript.js"></script>
  </body>
</html>

and that is my html code i think every is ok with my code but if there any issue i am looking for adives