How to change innerHTML of span of a div which is connected with Select-elements simultaneously when I change the value of the Select-Elements

Question

I am coding a timer. You can determine the time by click on the edit button and select the certain time with the select elements. Unfortunately the numbers of the timer are not changing when I determine the time with the select elements. It should be change simultaneously but it is neither changing nor changing simultaneously. I even tried it with the eventlistener of the event "change" but it did not work. Where is my failure? I marked the considered area in m JavaScript up.

window.onload = function () {

   //Card
   const card = document.getElementById("card");

   //Buttons
   const editer = document.getElementById("editer");
   const reseter = document.getElementById("reseter");
   const x = document.getElementById("close-btn");
   const starter = document.getElementById("starter");
   const quiter = document.getElementById("quiter");

   //"Select"-elements
   const edtHours = document.getElementById("edt-hours");
   const edtMinutes = document.getElementById("edt-minutes");
   const edtSeconds = document.getElementById("edt-seconds");


   //For calculation
   const mainclock = document.getElementById("mainclock");
   let i = true;
   let [seconds, minutes, hours] = [0, 0, 0];
   let interval = null;

   //If "start" is clicked
   starter.addEventListener("click", () => {
       starter.innerText = "Stop";
       if (!interval) {
           interval = setInterval(() => {
               timer();
           }, 1000);
       };
   });

   //Assign "Select"-elements to the associated "Span"-elements
   /*This If-query is neccessary in order to avoid three "0" in mainclock.innerHTML*/
//CONSIDERED AREA

   if (edtHours > 0) {
       edtHours.value = hours
   };

   if (edtMinutes > 0) {
       minutes = edtMinutes.value;
   };
   if (edtSeconds > 0) {
       seconds = edtSeconds.value;
   };
   h = hours < 10 ? "0" + hours : hours;
   m = minutes < 10 ? "0" + minutes : minutes;
   s = seconds < 10 ? "0" + seconds : seconds;
   mainclock.innerHTML = `${h} : ${m} : ${s} `;


   //Timer
   function timer() {
       while (hours > 0) {
           hours--;
       };
       while (minutes > 0) {
           minutes--;
       };
       while (seconds > 0) {
           seconds--;
       };
   };

   //Functions without any actual mathematical reference
   //Showing main-card
   editer.addEventListener('click', () => {
       if (i == true) {
           card.style.display = "block";
           i = false;
       } else if (i == false) {
           card.style.display = "none";
           i = true;
       }
   });

   //Closing main-card
   x.addEventListener("click", () => {
       card.style.display = "none";
       i = true;
   });
}

#mainboard {
    margin: 45vh;
}

[a] {
    display: flex;
    justify-content: center;
    align-items: center;

}

#main-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vh;

}


#card {
    width: 50vh;
    height: 50vh;
    border: 1px solid;
    border-color: black;
    border-radius: 5px;
    position: absolute;
    top: 30vh;
    left: 65vh;
    background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;


}

#start {
    background-color: #4AC33C;
}

#card-hdng {
    background-color: #2f2f2f;
    color: white;

}

How to change innerHTML of span of a div which is connected with Select-elements simultaneously when I change the value of the Select-Elements

0 Answers