Conflicting functions - clock not working.Please can you join me in the right direction

Question

im new to coding. Ive tried to find the answer online but I just can't see what's happening with my code.

I want to make a clock. It will show different time zones. When I click my second function the time changes but it is flicking back and forward between the two times at set intervals and I can't work out why?

I read that the variable has to be in the global scope and it is.

Im aware at this stage that I only have two time to change between but I figured if I get this bit to work I can then duplicate it for each time zone?

I really appreciate any help on this particular issue. I realise my code may not be great but i'm learning. Thankyou.

I have tried the clear interval and it won't stop the first time or it is causing a conflict somewhere.

Ive tried google and looked at the variable scope which is global as people say it needs to be.

I have sat for four hours messing about and Im writing this in an attempt to stop my laptop going out the window.

let date;
let time = document.getElementById("time");
let london = document.getElementsByClassName("london")
let Yek = document.getElementById("ball").addEventListener("click", plusFive)
let istambul = document.getElementsByClassName("istambul")
let moscow = document.getElementsByClassName("moscow")
let dubai = document.getElementsByClassName("dubai")
let stopper = clearInterval(updateTime);
let start = setInterval(updateTime, 1000);




// this function sets the date and get the hours minutes and seconds
function updateTime(start) {
    let date = new Date()
    const hours = date.getHours()
    const minutes = date.getMinutes()
    const seconds = date.getSeconds()

// the code below formats the time and converts it to a string

    const clockStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
// The code below places the formatted string into the time element 
    time.innerText = clockStr;
}
// this code calls the update time element and the set interval makes the clock tick with an interval a a second.
updateTime();
start;




function plusFive(){

    stopper;
    let date = new Date()
    const hours = date.getUTCHours()
    const minutes = date.getUTCMinutes()
    const seconds = date.getUTCSeconds()
    

    const clockStr1 = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    
    
    
    time.innerText = clockStr1;
    

    setInterval(plusFive , 1000);
}

Answer 1

Since setInterval creates a new repeating interval timer, you'll get multiple repeating timers as plusFive calls that function internally.

You'll want either only one invocation of setInterval(plusFive, 1000);, or alternatively setTimeout(plusFive, 1000); at the end of plusFive() (i.e. so plusFive schedules for itself to be called again soon, but not repeatedly, like setInterval would).

In short,

let time = document.getElementById("time");

function updateTime() {
  let date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  const clockStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  time.innerText = clockStr;
  setTimeout(updateTime, 1000); // Schedule for the next update to happen.
}
// Kick off the first update.
updateTime();

<h1 id=time></h1>