使用Javascript通过单击按钮在生成的列表中创建多个时钟

我希望用户从下拉列表中选择所需的时区，单击添加并显示时间。很简单。但是我也希望用户能够为其他时区添加额外的时钟。 我遇到了两个相互矛盾的问题：

我可以将时钟添加到列表中，但它们不会随着setInterval前进，因为我需要使列表的id唯一，这会产生错误

如果我消除了unique id变量（unique++），那么时钟可以工作，但是每次它创建一个新的时钟时，它们都会相互覆盖，因为它们的id不是唯一的

代码和jsfiddle如下：

vart；
var-nd；
var uniqueID=0；
//添加时区时钟并向uniqueID计数器添加1
document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById（'addTimeZone'）。addEventListener（'click'，getSelectTime）；
document.getElementById（'addTimeZone'）。addEventListener（'click'，addUniqueID）；
});
//每次单击“添加”按钮时将1添加到uniqueID
函数addUniqueID（）{
uniqueID++；
}
函数getSelectTime（）{
//为新列表项创建空间
document.getElementById（“addedClock”）.style.display=“block”；
//从下拉列表中获取时区偏移量
var t=document.getElementById（“时区”）.value；
//生成新列表项
var list=document.getElementById（'newClocks'）；
var entry=document.createElement（'li'）；
列表。追加子项（条目）；
//将div添加到列表以显示时间并添加唯一id
var divValue=document.createElement（“div”）；
divValue.id='resultTZValue'+uniqueID；
条目.appendChild（divValue）；
//运行时钟功能，传递时区偏移和唯一ID
tzClock（t，uniqueID）；
setInterval（（）=>{tzClock（t，uniqueID）；}，1000）；
}
函数tzClock（t，uniqueID）{
var d=新日期（）；
utc=d.getTime（）+（d.getTimezoneOffset（）*60000）；
nd=新日期（utc+（3600000*t））。toLocaleTimeString（）；
//将此新时间数据插入列表项
getElementById（“resultTZValue”+uniqueID）.innerHTML=nd；
}

好时光
li{列表样式类型：无；}
添加其他时区：
选择
世界协调时间
东标准
中央标准
山标准
太平洋标准
添加

我认为有两种方法可以解决这个问题

第一选项

在

setInterval

函数中调用另一个函数内部的函数将导致它始终获取全局变量，因此，不要使用

setInterval（（）=>{tzClock（t，uniqueID）；}，1000）

像

setInterval（tzClock，1000，t，uniqueID）

那样调用它

第二选项

---

您始终可以将元素作为参数而不是id传递，因此只需使用您创建的

divValue

并调用

element.innerHTML

而不是

document.getElementById（…）.innerHTML

我认为有两种方法可以解决这个问题

第一选项

在

setInterval

函数中调用另一个函数内部的函数将导致它始终获取全局变量，因此，不要使用

setInterval（（）=>{tzClock（t，uniqueID）；}，1000）

像

setInterval（tzClock，1000，t，uniqueID）

那样调用它

第二选项

您始终可以将元素作为参数而不是id传递，因此只需使用您创建的

divValue

并调用

element.innerHTML

而不是

document.getElementById（…）.innerHTML

以下是我的解决方案：

开始时将

uniqueID++

移动到

getSelectTime

函数中

然后在其中创建阵列，并开始为每个时钟设置间隔

  let arr = [];
  arr.push(uniqueID)
  arr.forEach(clock => {
    setInterval(() => {
      tzClock(t, clock);
    }, 1000);
  })

vart；
var-nd；
var uniqueID=0；
//添加时区时钟并向uniqueID计数器添加1
document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById（'addTimeZone'）。addEventListener（'click'，getSelectTime）；
});
函数getSelectTime（）{
独一无二的++
//为新列表项创建空间
document.getElementById（“addedClock”）.style.display=“block”；
//从下拉列表中获取时区偏移量
var t=document.getElementById（“时区”）.value；
//生成新列表项
var list=document.getElementById（'newClocks'）；
var entry=document.createElement（'li'）；
列表。追加子项（条目）；
//将div添加到列表以显示时间并添加唯一id
var divValue=document.createElement（“div”）；
divValue.id='resultTZValue'+uniqueID；
条目.appendChild（divValue）；
//运行时钟功能，传递时区偏移和唯一ID
tzClock（t，uniqueID）；
设arr=[]；
arr.push（唯一标识）
arr.forEach（时钟=>{
设置间隔（（）=>{
tzClock（t，clock）；
}, 1000);
})
}
功能时钟（t，唯一ID）{
var d=新日期（）；
utc=d.getTime（）+（d.getTimezoneOffset（）*60000）；
nd=新日期（utc+（3600000*t））。toLocaleTimeString（）；
//将此新时间数据插入列表项
document.getElementById（“resultTZValue”+uniqueID）.innerText=nd；
}

好时光
李{
列表样式类型：无；
}
添加其他时区：
选择
世界协调时间
东标准
中央标准
山标准
太平洋标准
添加

以下是我的解决方案：

开始时将

uniqueID++

移动到

getSelectTime

函数中

然后在其中创建阵列，并开始为每个时钟设置间隔

  let arr = [];
  arr.push(uniqueID)
  arr.forEach(clock => {
    setInterval(() => {
      tzClock(t, clock);
    }, 1000);
  })

vart；
var-nd；
var uniqueID=0；
//添加时区时钟并向uniqueID计数器添加1
document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById