Value from dropdown save to variable javascript

Question

I am creating my first javascript application and I ran into one problem! In function stoping, I have: if count > 30... I would like when a value is selected in the drop - down menu to load in position 30. when i go to setting and set the value to 40 when i run the app the value is reset to 30. I don't know what to learn so that the selected value from the drop-down menu is remembered when starting the application?

const container = document.getElementById("container");
const text = document.getElementById("text");
const num = document.getElementById("num");
const circle = document.getElementById("circle");
const hide = document.getElementById("hide");
const btn = document.getElementById("btn");
const settings = document.getElementById("settings");
const option = document.getElementById("option");
var a = document.getElementById("n").value;
let count = 0;
let count1;
let circleCount = 0;
let countHold = 0;
let timeSecond = 90;
let timeSecond1 = -1;
var countDown;
var id;
var stop;


const totalTime = 4000;
const breatheTime = 1700;
// const holdTime = totalTime / 5;

function breathAnimation() {
  count++;
  hide.classList.remove("hide");
  text.innerText = "Breathe In!";
  num.innerText = count;
  container.className = "container grow";

  stop = setTimeout(() => {
    text.innerText = "Breathe Out!";
    container.className = "container shrink";
  }, breatheTime);

  stoping();
}

function start() {
  breathAnimation();
  id = setInterval(breathAnimation, totalTime);
  option.classList.add("hide");

}

function stoping() {
  if (count > a) {
    clearInterval(id);
    clearTimeout(stop);
    hide.classList.add("hide");
    num.innerText = " ";
    text.innerText = " ";
    container.className = "container shrink";

    holdBreath();
  }
}

function displayTime(second) {
  const min = Math.floor(second / 60);
  const sec = Math.floor(second % 60);
  num.innerText = `${min < 10 ? "0" : ""}${min}:${sec < 10 ? "0" : ""}${sec}`;
}

function holdBreath() {
  countDown = setInterval(() => {
    timeSecond--;
    text.innerText = "Hold your breathd";
    displayTime(timeSecond);
    if (timeSecond <= 0 || timeSecond < 1) {
      clearInterval(countDown);
      timeSecond1 = -1;
      newFunction();
    }
  }, 1000);
}

function newFunction() {
  breathdInHold();
}

function breathdInHold() {
  count1 = setInterval(() => {
    timeSecond1++;
    text.innerText = "BREATHD IN and hold 15sec";
    displayTime(timeSecond1);
    if (timeSecond1 > 17 || timeSecond1 >= 16) {
      clearInterval(count1);
      check();
      countHold = 0;
      count = 0;
      circleCount++;
      text.innerText = "";
      num.innerText = "";

      breathAnimation();
      id = setInterval(breathAnimation, totalTime);
    }
  }, 1000);
}

function check() {
  if (circleCount === 0) {
    timeSecond = 105;
  } else if (circleCount === 1) {
    timeSecond = 120;
  } else {
    timeSecond = 135;
  }
}

function stopingAll() {
  count = 0;
  count1;
  circleCount = 0;
  countHold = 0;
  timeSecond = 90;
  timeSecond1 = -1;
  container.className = "container shrink";
  clearInterval(id);
  clearTimeout(stop);
  clearInterval(count1);
  clearInterval(countDown);
  hide.classList.add("hide");
  num.innerText = " ";
  text.innerText = " ";
  let btn = document.createElement("button");
  btn.innerHTML = "START";

  btn.onclick = function() {
    start();
  };
  text.appendChild(btn);
  option.classList.remove("hide");
}

function test3() {
  container.classList.add("hide");
  settings.classList.remove("hide");
  option.classList.add("hide");
}

function test4() {
  container.classList.remove("hide");
  settings.classList.add("hide");
  option.classList.remove("hide");
  a = document.getElementById("n").value;

}

* {
  box-sizing: border-box;
}

body {
  background: url("zac-durant-_6HzPU9Hyfg-unsplash.jpg") no-repeat center center/cover;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.option {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

img {
  width: 40px;
  height: 40px;
  margin: 0 15px 15px;
  padding: 0;
  filter: invert(100%);
}


/* *************************************************settings********************************************************* */

.settings {
  display: flex;
  justify-content: center;
  text-align: center;
  /* height: 75vh; */
  width: 350px;
  background-color: #444444b0;
}

.par2 {
  font-size: 14px;
  padding-bottom: 40px;
}


/* ********************************************************************************************************** */

h1 {
  font-size: 3em;
  color: #ded8d8;
  font-weight: bold;
  text-align: center;
}

p {
  font-size: 30px;
  text-align: center;
  margin-bottom: 0;
}

span {
  display: flex;
  font-size: 2em;
  justify-content: center;
  position: relative;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  height: 300px;
  width: 300px;
  position: relative;
  transform: scale(1);
}

.circle {
  background-color: #010f1c;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.gradient-circle {
  background: conic-gradient( #20c1e9 0%, #20c1e9 40%, #ff3636 40%, #ff3636 100%);
  height: 320px;
  width: 320px;
  z-index: -2;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: -10px;
}

.pointer {
  background-color: #fff;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  display: block;
}

.hide {
  display: none;
}

.pointer-container {
  position: absolute;
  top: -40px;
  left: 140px;
  width: 20px;
  height: 190px;
  animation: rotate 4s linear forwards infinite;
  transform-origin: bottom center;
  -webkit-animation: rotate 4s linear forwards infinite;
}

button {
  background-color: #00806a00;
  font-size: 2em;
  text-transform: uppercase;
  border: none;
  color: white;
  cursor: pointer;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.container.grow {
  animation: grow 1.7s linear forwards;
  -webkit-animation: grow 1.7s linear forwards;
}

@keyframes grow {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
  }
}

.container.shrink {
  animation: shrink 2.2s linear forwards;
  -webkit-animation: shrink 2.2s linear forwards;
}

@keyframes shrink {
  from {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
  }
  to {
    transform: scale(1);
  }
}

@media only screen and (max-width: 700px) {
  h1 {
    font-size: 2em;
    text-align: center;
  }
}

@media only screen and (max-width: 400px) {
  h1 {
    font-size: 2em;
    text-align: center;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <title>Relaxer</title>

</head>

<body>


  <h1>SebWebSwiss breathing app inspired by Wim Hof</h1>

  <div class="container" id="container">
    <div ondblclick="stopingAll()" class="circle"></div>

    <p ondblclick="stopingAll()" id="text"><button id="but" onclick="start()">Start</button></p><br>
    <span ondblclick="stopingAll()" id="num"></span>

    <div id="hide" class="pointer-container hide">
      <span id="circle" class="pointer"></span>
    </div>

    <div class="gradient-circle"></div>

  </div>
  <div class="settings hide" id="settings">
    <form action="">
      <label>Number of breaths:</label>
      <select id="n" name="Number">
        <option value="30">30</option>
        <option value="35">35</option>
        <option value="40">40</option>
      </select><br><br>

      <p class="par2">To stop or reset the counters you need to double click on the circle</p>
      <button onclick="test4()">Save</button>
    </form>


  </div>

  <div id="option" class="option"><button onclick="test3()"><img src="option.svg" alt="settings"></button></div>
  <!-- <button onclick="stopingAll()">stop</button> -->
  <script src="script.js"></script>
</body>

</html>