javascript - Date.setHours does not persist on analog clock, goes back to rendering current time after a few seconds

Question

Good Evening, I have created an analog clock using javascript. I got the on click function to set the time to what the user puts in the input box on the clock, but after a few seconds, the clock goes back to the current time. I am not sure what I am missing here. The hands also stop moving even though I have setInterval.

// Clock constants using DOM querySelector by the ID
const hourHand = document.querySelector('#hour');
const minuteHand = document.querySelector('#minute');
const secondHand = document.querySelector('#second');




 function startClock() {
     // Creating Date object and getting the current time
     const date = new Date();
     const hour = date.getHours();
     const minute = date.getMinutes();
     const second = date.getSeconds();
    
   

     // Hand Position Formulas
     // hr = the current hour * degrees in a cirlce/hours on the clock  + currnet minute * degrees in a cirlce/minutes in an hour / 12
     // min = current minute * degrees in a cirlce/ minutes in an hour  + current second * 360 / seconds in a minute / 60
     // sec = current second * degrees in a cirlce/ seconds in a minute
     var hrPosition = hour * 360 / 12 + ((minute * 360 / 60) / 12);
     var minPosition = (minute * 360 / 60) + (second * 360 / 60) / 60;
     var secPosition = second * 360 / 60;

  

     // Applying the results from the above equation to the clock to show the correct hands position
     hourHand.style.transform = `rotate(${hrPosition}deg)`;
     minuteHand.style.transform = `rotate(${minPosition}deg)`;
     secondHand.style.transform = `rotate(${secPosition}deg)`;


}




// Variables for am and pm
const nDate = new Date();
const nHour = nDate.getHours();
const nMinute = nDate.getMinutes();
const nSecond = nDate.getSeconds();

// Creating a AM and PM conditional 
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (nHour >= 12) {
    const currentD = document.createElement('DIV');
    const currentP = document.createElement('P');
    currentD.className = ('currentD')
    currentP.className =('current');

    const local = document.querySelector('.local');
    const pmText = document.createTextNode(`The current time is ${nHour}:${nMinute} P.M`);

    currentD.appendChild(currentP);
    local.appendChild(currentD);
    currentP.appendChild(pmText);
} else if (nHour < 12){
  
    const currentD = document.createElement('DIV');
    const currentP = document.createElement('P');
    currentD.className = ('currentD')
    currentP.className = ('current');

    const local = document.querySelector('.local');
    const amText = document.createTextNode(`The current time is ${nHour}:${nMinute} A.M`);
    
    currentD.appendChild(currentP);
    local.appendChild(currentD);
    currentP.appendChild(amText);
} else {
    console.log("This is not a valid date");
}


// California Time //  ****************************


// Clock constants using DOM querySelector by the ID
const hourHandC = document.querySelector('#hourC');
const minuteHandC = document.querySelector('#minuteC');
const secondHandC = document.querySelector('#secondC');

function startClockC() {
    // Using MomentJs and MomentTimeZone to get the current hour, minute, second in la
    var laHr = moment.tz('America/Los_Angeles').hour();
    var laMin = moment.tz('America/Los_Angeles').minute();
    var laSec = moment.tz('America/Los_Angeles').second();





    // Hand Position Formulas

    // hr = the current hour * degrees in a cirlce/hours on the clock  + currnet minute * degrees in a cirlce/minutes in an hour / 12
    // min = current minute * degrees in a cirlce/ minutes in an hour  + current second * 360 / seconds in a minute / 60
    // sec = current second * degrees in a cirlce/ seconds in a minute

    let hrPositionC = laHr * 360 / 12 + ((laMin * 360 / 60) / 12);
    let minPositionC = (laMin * 360 / 60) + (laSec * 360 / 60) / 60;
    let secPositionC = laSec * 360 / 60;



    // Applying the results from the above equation to the clock to show the correct hands position
    hourHandC.style.transform = `rotate(${hrPositionC}deg)`;
    minuteHandC.style.transform = `rotate(${minPositionC}deg)`;
    secondHandC.style.transform = `rotate(${secPositionC}deg)`;

}



// Variables for am and pm
var nHr = moment.tz('America/Los_Angeles').hour();
var nMin = moment.tz('America/Los_Angeles').minute();
var nSec = moment.tz('America/Los_Angeles').second();

// Creating a AM and PM conditional 
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (nHr >= 12) {
    // Creating P element
    const currentDI = document.createElement('DIV');
    const currentPA = document.createElement('P');
    currentDI.className = ('currentDI')
    currentPA.className = ('current');
    // Creating text node to show time.
    const localC = document.querySelector('.california');
    const pmText = document.createTextNode(`The current time is ${nHr}:${nMin} P.M`);
    // appending to render time
    currentDI.appendChild(currentPA);
    localC.appendChild(currentDI);
    currentPA.appendChild(pmText);
} else if (nHr < 12) {

    const currentDI = document.createElement('DIV');
    const currentPA = document.createElement('P');
    currentDI.className = ('currentDI')
    currentPA.className = ('currentPA');

    const localC = document.querySelector('.california');
    const amText = document.createTextNode(`The current time is ${nHr}:${nMin} A.M`);


    currentDI.appendChild(currentPA);
    localC.appendChild(currentDI);
    currentPA.appendChild(amText);
} else {
    console.log("This is not a valid date");
}



// London Time // ********************************


// Clock constants using DOM querySelector by the ID
const hourHandL = document.querySelector('#hourL');
const minuteHandL = document.querySelector('#minuteL');
const secondHandL = document.querySelector('#secondL');

function startClockL() {
    // Using MomentJs and MomentTimeZone to get the current hour, minute, second in la
    var loHr = moment.tz('Europe/London').hour();
    var loMin = moment.tz('Europe/London').minute();
    var loSec = moment.tz('Europe/London').second();

 



    // Hand Position Formulas

    // hr = the current hour * degrees in a cirlce/hours on the clock  + currnet minute * degrees in a cirlce/minutes in an hour / 12
    // min = current minute * degrees in a cirlce/ minutes in an hour  + current second * 360 / seconds in a minute / 60
    // sec = current second * degrees in a cirlce/ seconds in a minute

    let hrPositionL = loHr * 360 / 12 + ((loMin * 360 / 60) / 12);
    let minPositionL = (loMin * 360 / 60) + (loSec * 360 / 60) / 60;
    let secPositionL = loSec * 360 / 60;

   

    // Applying the results from the above equation to the clock to show the correct hands position
    hourHandL.style.transform = `rotate(${hrPositionL}deg)`;
    minuteHandL.style.transform = `rotate(${minPositionL}deg)`;
    secondHandL.style.transform = `rotate(${secPositionL}deg)`;

}



// Variables for am and pm
var lHr = moment.tz('Europe/London').hour();
var lMin = moment.tz('Europe/London').minute();
var lSec = moment.tz('Europe/London').second();

// Creating a AM and PM conditional 
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (lHr >= 12) {
    // Creating P element
    const currentLD = document.createElement('DIV');
    const currentLP = document.createElement('P');
    currentLD.className = ('currentLD')
    currentLP.className = ('currentLP');
    // Creating text node to show time.
    const localLo = document.querySelector('.london');
    const pmText = document.createTextNode(`The current time is ${lHr}:${lMin} P.M`);
    // appending to render time
    currentLD.appendChild(currentLP);
    localLo.appendChild(currentLD);
    currentLP.appendChild(pmText)
} else if (lHr < 12) {

    const currentLD = document.createElement('DIV');
    const currentLP = document.createElement('P');
    currentLD.className = ('currentLD')
    currentLP.className = ('currentLP');

    
    const localLo = document.querySelector('.london');
    const amText = document.createTextNode(`The current time is ${lHr}:${lMin} A.M`);

    currentLD.appendChild(currentLP);
    localLo.appendChild(currentLD);
    currentLP.appendChild(amText);
} else {
    console.log("This is not a valid date");
}




$(document).ready(function () {
    var currentSetInterval = null;
     currentSetInterval = setInterval(function () {
        startClock();
        startClockC();
        startClockL();
    }, 1000);

    $('#addTime').on('click', function () {
        if (currentSetInterval) {
            clearInterval(currentSetInterval);
        } else {
            consol.log("Something went wrong");
        }
        // Clock constants using DOM querySelector by the ID
        const hourHandN = document.querySelector('#hour');
        const minuteHandN = document.querySelector('#minute');
        const secondHandN = document.querySelector('#second');
        
        const intervalInput = $('#input').val();
        var interval = intervalInput;

        const dateN = new Date();
        var milliAdd = interval * 60 * 60 * 1000;
        dateN.setHours(interval);
        const hourN = dateN.getHours();
        const minuteN = dateN.getMinutes();
        const secondN = dateN.getSeconds();

        console.log(hourN, minuteN, secondN);

        // Hand Position Formulas
        // hr = the current hour * degrees in a cirlce/hours on the clock  + currnet minute * degrees in a cirlce/minutes in an hour / 12
        // min = current minute * degrees in a cirlce/ minutes in an hour  + current second * 360 / seconds in a minute / 60
        // sec = current second * degrees in a cirlce/ seconds in a minute
        var hrPositionN = hourN * 360 / 12 + ((minuteN * 360 / 60) / 12);
        var minPositionN = (minuteN * 360 / 60) + (secondN * 360 / 60) / 60;
        var secPositionN = secondN * 360 / 60;

    

        // Applying the results from the above equation to the clock to show the correct hands position
        hourHandN.style.transform = `rotate(${hrPositionN}deg)`;
        minuteHandN.style.transform = `rotate(${minPositionN}deg)`;
        secondHandN.style.transform = `rotate(${secPositionN}deg)`;

        currentSetInterval = setInterval(function (intervalInput) {
            console.log(intervalInput)
            startClock(intervalInput);
            startClockC(intervalInput);
            startClockL(intervalInput);
        }, 1000);

    })
});

question from:https://stackoverflow.com/questions/65931313/date-sethours-does-not-persist-on-analog-clock-goes-back-to-rendering-current-t

Answer 1

Errors:

• 1: intervalInput doesn't persist nor can it be accessed in other functions,
  Fix: Use global variables(window.intervalInput=?) docs here
• 2: clearInterval fails(Uncaught error in console.log)
  Fix: use window.clearInterval
• 3:To add time you must not setHours
  Fix: Since you get milliAdd use date.setMilliseconds(date.getMilliseconds()+window.milliAdd); Resulting code for local clock alone:

// Clock constants using DOM querySelector by the ID
const hourHand = document.querySelector("#hour");
const minuteHand = document.querySelector("#minute");
const secondHand = document.querySelector("#second");

function startClock() {
  // Creating Date object and getting the current time
  var date = new Date();
  if (window.milliAdd) {
    date.setMilliseconds(date.getMilliseconds() + window.milliAdd);
  }
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();

  // Hand Position Formulas
  // hr = the current hour * degrees in a cirlce/hours on the clock  + currnet minute * degrees in a cirlce/minutes in an hour / 12
  // min = current minute * degrees in a cirlce/ minutes in an hour  + current second * 360 / seconds in a minute / 60
  // sec = current second * degrees in a cirlce/ seconds in a minute
  var hrPosition = (hour * 360) / 12 + (minute * 360) / 60 / 12;
  var minPosition = (minute * 360) / 60 + (second * 360) / 60 / 60;
  var secPosition = (second * 360) / 60;
  // Applying the results from the above equation to the clock to show the correct hands position
  hourHand.style.transform = `rotate(${hrPosition}deg)`;
  minuteHand.style.transform = `rotate(${minPosition}deg)`;
  secondHand.style.transform = `rotate(${secPosition}deg)`;
}

// Variables for am and pm
const nDate = new Date();
const nHour = nDate.getHours();
const nMinute = nDate.getMinutes();
const nSecond = nDate.getSeconds();

// Creating a AM and PM conditional
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (nHour >= 12) {
  const currentD = document.createElement("DIV");
  const currentP = document.createElement("P");
  currentD.className = "currentD";
  currentP.className = "current";

  const local = document.querySelector(".local");
  const pmText = document.createTextNode(
    `The current time is ${nHour}:${nMinute} P.M`
  );

  currentD.appendChild(currentP);
  local.appendChild(currentD);
  currentP.appendChild(pmText);
} else if (nHour < 12) {
  const currentD = document.createElement("DIV");
  const currentP = document.createElement("P");
  currentD.className = "currentD";
  currentP.className = "current";

  const local = document.querySelector(".local");
  const amText = document.createTextNode(
    `The current time is ${nHour}:${nMinute} A.M`
  );

  currentD.appendChild(currentP);
  local.appendChild(currentD);
  currentP.appendChild(amText);
} else {
  console.log("This is not a valid date");
}

// California Time //  ****************************

// Clock constants using DOM querySelector by the ID
const hourHandC = document.querySelector("#hourC");
const minuteHandC = document.querySelector("#minuteC");
const secondHandC = document.querySelector("#secondC");

function startClockC() {
  // Using MomentJs and MomentTimeZone to get the current hour, minute, second in la
  var laHr = moment.tz("America/Los_Angeles").hours(2);
  var laMin = moment.tz("America/Los_Angeles").minute();
  var laSec = moment.tz("America/Los_Angeles").second();

  // Hand Position Formulas

  // hr = the current hour * degrees in a cirlce/hours on the clock  + currnet minute * degrees in a cirlce/minutes in an hour / 12
  // min = current minute * degrees in a cirlce/ minutes in an hour  + current second * 360 / seconds in a minute / 60
  // sec = current second * degrees in a cirlce/ seconds in a minute

  let hrPositionC = (laHr * 360) / 12 + (laMin * 360) / 60 / 12;
  let minPositionC = (laMin * 360) / 60 + (laSec * 360) / 60 / 60;
  let secPositionC = (laSec * 360) / 60;

  // Applying the results from the above equation to the clock to show the correct hands position
  hourHandC.style.transform = `rotate(${hrPositionC}deg)`;
  minuteHandC.style.transform = `rotate(${minPositionC}deg)`;
  secondHandC.style.transform = `rotate(${secPositionC}deg)`;
}

// Variables for am and pm
var nHr = moment.tz("America/Los_Angeles").hour();
var nMin = moment.tz("America/Los_Angeles").minute();
var nSec = moment.tz("America/Los_Angeles").second();

// Creating a AM and PM conditional
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (nHr >= 12) {
  // Creating P element
  const currentDI = document.createElement("DIV");
  const currentPA = document.createElement("P");
  currentDI.className = "currentDI";
  currentPA.className = "current";
  // Creating text node to show time.
  const localC = document.querySelector(".california");
  const pmText = document.createTextNode(
    `The current time is ${nHr}:${nMin} P.M`
  );
  // appending to render time
  currentDI.appendChild(currentPA);
  localC.appendChild(currentDI);
  currentPA.appendChild(pmText);
} else if (nHr < 12) {
  const currentDI = document.createElement("DIV");
  const currentPA = document.createElement("P");
  currentDI.className = "currentDI";
  currentPA.className = "currentPA";

  const localC = document.querySelector(".california");
  const amText = document.createTextNode(
    `The current time is ${nHr}:${nMin} A.M`
  );

  currentDI.appendChild(currentPA);
  localC.appendChild(currentDI);
  currentPA.appendChild(amText);
} else {
  console.log("This is not a valid date");
}

// London Time // ********************************

// Clock constants using DOM querySelector by the ID
const hourHandL = document.querySelector("#hourL");
const minuteHandL = document.querySelector("#minuteL");
const secondHandL = document.querySelector("#secondL");

function startClockL() {
  // Using MomentJs and MomentTimeZone to get the current hour, minute, second in la
  var loHr = moment.tz("Europe/London").hour();
  var loMin = moment.tz("Europe/London").minute();
  var loSec = moment.tz("Europe/London").second();

  // Hand Position Formulas

  // hr = the current hour * degrees in a cirlce/hours on the clock  + currnet minute * degrees in a cirlce/minutes in an hour / 12
  // min = current minute * degrees in a cirlce/ minutes in an hour  + current second * 360 / seconds in a minute / 60
  // sec = current second * degrees in a cirlce/ seconds in a minute

  let hrPositionL = (loHr * 360) / 12 + (loMin * 360) / 60 / 12;
  let minPositionL = (loMin * 360) / 60 + (loSec * 360) / 60 / 60;
  let secPositionL = (loSec * 360) / 60;

  // Applying the results from the above equation to the clock to show the correct hands position
  hourHandL.style.transform = `rotate(${hrPositionL}deg)`;
  minuteHandL.style.transform = `rotate(${minPositionL}deg)`;
  secondHandL.style.transform = `rotate(${secPositionL}deg)`;
}

// Variables for am and pm
var lHr = moment.tz("Europe/London").hour();
var lMin = moment.tz("Europe/London").minute();
var lSec = moment.tz("Europe/London").second();

// Creating a AM and PM conditional
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (lHr >= 12) {
  // Creating P element
  const currentLD = document.createElement("DIV");
  const currentLP = document.createElement("P");
  currentLD.className = "currentLD";
  currentLP.className = "currentLP";
  // Creating text node to show time.
  const localLo = document.querySelector(".london");
  const pmText = document.createTextNode(
    `The current time is ${lHr}:${lMin} P.M`
  );
  // appending to render time
  currentLD.appendChild(currentLP);
  localLo.appendChild(currentLD);
  currentLP.appendChild(pmText);
} else if (lHr < 12) {
  const currentLD = document.createElement("DIV");
  const currentLP = document.createElement("P");
  currentLD.className = "currentLD";
  currentLP.className = "currentLP";

  const localLo = document.querySelector(".london");
  const amText = document.createTextNode(
    `The current time is ${lHr}:${lMin} A.M`
  );

  currentLD.appendChild(currentLP);
  localLo.appendChild(currentLD);
  currentLP.appendChild(amText);
} else {
  console.log("This is not a valid date");
}

$(document).ready(function () {
  var currentSetInterval = null;
  currentSetInterval = window.setInterval(function () {
    startClock();
    startClockC();
    startClockL();
  }, 1000);

  $("#addTime").on("click", function () {
    if (currentSetInterval) {
      window.clearInterval(currentSetInterval);
    } else {
      consol.log("Something went wrong");
    }
    // Clock constants using DOM querySelector by the ID
    const hourHandN = document.querySelector("#hour");
    const minuteHandN = document.querySelector("#minute");
    const secondHandN = document.querySelector("#second");

    var intervalInput = $("#input").val();
    var interval = intervalInput;

    var dateN = new Date();
    window.milliAdd = interval * 60 * 60 * 1000;

    dateN.setMilliseconds(dateN.getMilliseconds() + window.milliAdd);
    const hourN = dateN.getHours();
    const minuteN = dateN.getMinutes();
    const secondN = dateN.getSeconds();

    console.log(hourN, minuteN, secondN);

    // Hand Position Formulas
    // hr = the current hour * degrees in a cirlce/hours on the clock  + currnet minute * degrees in a cirlce/minutes in an hour / 12
    // min = current minute * degrees in a cirlce/ minutes in an hour  + current second * 360 / seconds in a minute / 60
    // sec = current second * degrees in a cirlce/ seconds in a minute
    var hrPositionN = (hourN * 360) / 12 + (minuteN * 360) / 60 / 12;
    var minPositionN = (minuteN * 360) / 60 + (secondN * 360) / 60 / 60;
    var secPositionN = (secondN * 360) / 60;

    // Applying the results from the above equation to the clock to show the correct hands position
    hourHandN.style.transform = `rotate(${hrPositionN}deg)`;
    minuteHandN.style.transform = `rotate(${minPositionN}deg)`;
    secondHandN.style.transform = `rotate(${secPositionN}deg)`;

    currentSetInterval = setInterval(function () {
      console.log();
      start