Javascript 倒计时仅适用于第一个按钮，而不适用于其他按钮

我需要你的帮助。我有一个带倒计时的下载按钮，但这个按钮有问题。它仅在第一个按钮上起作用，或者如果在第一个按钮上单击第二个按钮，则在第一个按钮而不是第二个按钮上启动。请帮我纠正这个错误。 我已经创建了一个代码片段。请检查一下，让我知道有什么问题！多谢各位

函数生成（）{
var e，n=document.getElementById（“downloadingx”），
t=document.getElementById（“downloadbuttonx”），
a=document.getElementById（“downloadingx”）.href，
l=10，
d=document.createElement（“span”）；
n、 parentNode.replaceChild（d，n），e=setInterval（函数（）{
--l<0？（d.parentNode.replaceChild（n，d），clearInterval（e），window.open（a），n.style.display=“inline”）：（d.innerHTML=“重定向到“+l.toString（）+”秒”中的下载页面，t.style.display=“无”）
}，1e3）
}

#下载按钮{
光标：指针；
填充：10px 20px；
边界：无；
边界半径：3px；
背景：#fff；
颜色：#e67e22；
浮动：无；
文本转换：大写；
字号：800；
过渡：均为0.5s；
字体大小：16px；
大纲：无；
}
#downloadbuttonx:悬停，
#下载X:悬停{
背景：#ffffff；
颜色：#b62727；
大纲：无；
}
巴塔斯·唐克斯先生{
保证金：自动；
边界半径：4px；
显示：块；
}
背景盒街{
背景#b62727；
颜色：#fff；
填充：10px 10px 5px 10px；
宽度：310px；
文本对齐：居中；
左：50%；
转换：翻译（-50%）；
位置：相对位置；
边框右上角半径：5px；
边框左上半径：5px；
边框右下半径：5px；
边框左下半径：5px；
线高：80px；
边缘底部：10px；
}
.background-box-n{
背景#a30085；
颜色：#fff；
填充：10px 10px 5px 10px；
宽度：310px；
文本对齐：居中；
左：50%；
转换：翻译（-50%）；
位置：相对位置；
边框右上角半径：5px；
边框左上半径：5px；
边框右下半径：5px；
边框左下半径：5px；
线高：80px；
边缘底部：10px；
}
.文件名{
字体系列：无衬线；
字体大小：1.3em；
字号：700；
颜色：#fff；
线高：35px；
文本对齐：居中；
显示：块；
保证金：5px；
}
卡塔坦唐克斯酒店{
填充：20px；
背景：#f7f7f7；
颜色：#555；
字体大小：20px；
}
#下载{
显示：块；
填充：10px 20px；
边界半径：3px；
颜色：#e67e22；
背景：#fff；
文字装饰：无；
文本转换：大写；
文本对齐：居中；
浮动：无；
线高：80px；
字体大小：16px；
字号：600；
}
.bungkus信息跨度{
显示：块；
线高：80px；
浮动：无；
}
.file deskripsi{
显示：块；
}
.file deskripsi span{
右边距：3倍；
}
#下载按钮，
a#下载X{
宽度：160px；
填充：15px；
光标：指针；
}
.bungkus信息跨度{
浮动：无；
宽度：100%；
文本对齐：居中；
}
.file deskripsi{text align:center}
}

文件1
下载


文件1
下载

一种方法是使用

this.ID

传递按钮的ID，然后使用该ID获取单击的按钮

请参见下面的示例

函数生成（idOfButtonClicked）{
log（“ID为：”，idOfButtonClicked）
}

点击我


单击我试试这个

function generate(buttonId,hrefId) {
    var e, n = document.getElementById(hrefId),
      t = document.getElementById(buttonId),
      a = document.getElementById(hrefId).href,
      l = 10,
      d = document.createElement("span");
    n.parentNode.replaceChild(d, n), e = setInterval(function() {
      --l < 0 ? (d.parentNode.replaceChild(n, d), clearInterval(e), window.open(a), n.style.display = "inline") : (d.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
    }, 1e3)
  }


<div class="batas-downx">
      <div class="background-box-n">
        <div class="bungkus-info">
          <div class="file-name">File 1</div>
          <button id="downloadbuttonx0" onclick="generate('downloadbuttonx0','downloadingx0')"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
          <a href="#" id="downloadingx0" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
        </div>
      </div>
    </div>
    <br>
    <div class="batas-downx">
      <div class="background-box-st">
        <div class="bungkus-info">
          <div class="file-name">File 1</div>
          <button id="downloadbuttonx1" onclick="generate('downloadbuttonx1','downloadingx1')"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
          <a href="#" id="downloadingx1" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
        </div>
      </div>
    </div>

函数生成（buttonId、hrefId）{
变量e，n=document.getElementById（hrefId），
t=document.getElementById（buttonId），
a=document.getElementById（hrefId）.href，
l=10，
d=document.createElement（“span”）；
n、 parentNode.replaceChild（d，n），e=setInterval（函数（）{
--l<0？（d.parentNode.replaceChild（n，d），clearInterval（e），window.open（a），n.style.display=“inline”）：（d.innerHTML=“重定向到“+l.toString（）+”秒”中的下载页面，t.style.display=“无”）
}，1e3）
}
文件1
下载


文件1
下载
我发现了你的错误。第一个下载按钮和第二个下载按钮的id相同。
我通过改变第二个的id来解决这个问题

function generatex() {
var e, n = document.getElementById("downloadingx"),
  t = document.getElementById("downloadbuttonx"),
  a = document.getElementById("downloadingx").href,
  l = 10,
  d = document.createElement("span");
n.parentNode.replaceChild(d, n), e = setInterval(function() {
  --l < 0 ? (d.parentNode.replaceChild(n, d), clearInterval(e), window.open(a), n.style.display = "inline") : (d.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
}, 1e3)
}
function generatey() {
var e, n = document.getElementById("downloadingy"),
  t = document.getElementById("downloadbuttony"),
  a = document.getElementById("downloadingy").href,
  l = 10,
  d = document.createElement("span");
n.parentNode.replaceChild(d, n), e = setInterval(function() {
  --l < 0 ? (d.parentNode.replaceChild(n, d), clearInterval(e), window.open(a), n.style.display = "inline") : (d.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
}, 1e3)
}

html


文件1
下载


文件1
下载
您真的应该在JavaScript中注册事件侦听器。这样做将允许您在
generate
中使用
this
来引用事件侦听器绑定到的元素

从这里找到合适的锚（



文件2
下载
因为你不能拥有相同的ID，即两个不同元素的
downloadingx
。你的两个按钮都有相同的ID，因此每次按下第二个按钮时javascript都会指向第一个ID。嘿@NotABot！那么我应该使用什么？代码是什么？@NotABot！你能用解决方案创建一个代码段吗？请！我想你可以添加css类，比如。下载，这样你就可以减少css代码。我很抱歉我的英语不好。非常感谢你@不是机器人它对我有效嘿@不是机器人，你的解决方案对我很有效，但有两个小问题。1：当我点击“下载”按钮时，按钮的大小减小到文件标题，然后返回到or计时器开始时的信号大小。而大小应保持不变。2：当时间流逝时，“重定向…”应出现，而“下载”按钮再次出现。有什么方法可以解决这些问题吗？您可以添加类似downloadBtn的类，以便减少css代码。我为我糟糕的英语感到抱歉。非常感谢@George It为我工作不客气。在stackoverflow，每个人都帮助别人。我知道的很少，
#downloadbuttonx{
  cursor: pointer;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  background: #fff;
  color: #e67e22;
  float: none;
  text-transform: uppercase;
  font-weight: 800;
  transition: all 0.5s;
  font-size: 16px;
  outline: none;
}
#downloadbuttony{
  cursor: pointer;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  background: #fff;
  color: #e67e22;
  float: none;
  text-transform: uppercase;
  font-weight: 800;
  transition: all 0.5s;
  font-size: 16px;
  outline: none;
}

#downloadbuttonx:hover,
#downloadingx:hover{
  background: #ffffff;
  color: #b62727;
  outline: none;
}
#downloadbuttony:hover,
#downloadingy:hover{
  background: #ffffff;
  color: #b62727;
  outline: none;
}
.batas-downx{
  margin: auto;
  border-radius: 4px;
  display:block;
}
.batas-downy{
  margin: auto;
  border-radius: 4px;
  display:block;
}

.background-box-st{
  background: #b62727;
  color: #fff;
  padding: 10px 10px 5px 10px;
  width: 310px;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  line-height: 80px;
  margin-bottom: 10px;
}

.background-box-n{
  background: #a30085;
  color: #fff;
  padding: 10px 10px 5px 10px;
  width: 310px;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  line-height: 80px;
  margin-bottom: 10px;
}

.file-name{
  font-family: sans-serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
  line-height: 35px;
  text-align: center;
  display: block;
  margin: 5px;
}

.catatan-downx{
padding:20px;
background:#f7f7f7;
color:#555;
font-size:20px;
}
.catatan-downy{
padding:20px;
background:#f7f7f7;
color:#555;
font-size:20px;
}

#downloadingx{
  display:block;
  padding: 10px 20px;
  border-radius: 3px;
  color: #e67e22;
  background: #fff;
  text-decoration: none;
  text-transform:capitalize;
  text-align:center;
  float:none;
  line-height:80px;
  font-size:16px;
  font-weight: 600;
}
#downloadingy{
  display:block;
  padding: 10px 20px;
  border-radius: 3px;
  color: #e67e22;
  background: #fff;
  text-decoration: none;
  text-transform:capitalize;
  text-align:center;
  float:none;
  line-height:80px;
  font-size:16px;
  font-weight: 600;
}


.bungkus-info span{
display:block;
line-height:80px;
float:none;
}

.file-deskripsi{
display:block;
}

.file-deskripsi span{
margin-right:3px;
}

#downloadbuttonx,
#downloadbuttony,
a#downloadingx,
a#downloadingy{
width:160px;
padding:15px;
cursor:pointer;
}

.bungkus-info span{
float:none;
width:100%;
text-align:center;
}

.file-deskripsi{text-align:center}
}

<div class="batas-downx">
    <div class="background-box-n">
        <div class="bungkus-info">
            <div class="file-name">File 1</div>
            <button id="downloadbuttonx" onclick="generatex()"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
            <a href="#" id="downloadingx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
        </div>
    </div>
</div>
<br>
<div class="batas-downx">
    <div class="background-box-st">
        <div class="bungkus-info">
            <div class="file-name">File 1</div>
            <button id="downloadbuttony" onclick="generatey()"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
            <a href="#" id="downloadingy" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
        </div>
    </div>
</div>