下载前倒计时仅适用于第一个按钮

Question

我在下载前有一个带有几秒钟计时器的下载按钮，但不幸的是，它仅适用于第一个按钮，而不适用于其他按钮。我希望它能够在每个下载按钮上正常工作，但我不知道如何解决这个问题。请帮忙！

我附上了我一直在使用的 CSS、HTML 和 JavaScript。

document.getElementById("download_button").addEventListener("click", function(event) {

  event.preventDefault();

  var timeleft = 3;

  var downloadTimer = setInterval(function function1() {

    document.getElementById('download').style.display = "none";

    document.getElementById("timer").innerHTML = "Wait " + timeleft + "";

    if (timeleft <= 0) {

      clearInterval(downloadTimer);

      document.getElementById("timer").innerHTML = ""

      window.open(document.querySelector('#downloadbutton a').href, '_blank');

      document.getElementById('download').style.display = "";

    }

    timeleft -= 1;

  }, 1000);

});

.container {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

}

#download_button {

  border: none;

  margin-top: 0px;

  padding: 10px;

  width: 200px;

  font-family: "montserrat", sans-serif;

  text-transform: uppercase;

  border-radius: 6px;

  cursor: pointer;

  color: #fff;

  font-size: 16px;

  transition: 0.4s;

  line-height: 28px;

  outline: none;

}

.button-1 {

  background: #f12711;

}

.button-2 {

  background: #0575E6;

}

.button-3 {

  background: #fe8c00;

}

#download_button:hover {

  background: #000000;

}

.title {

  font-weight: bold;

}

<div id="downloadbutton" style="text-align: center;">

  <a href="http:///www.google.com">

    <button id="download_button" class="button-1">

          <div class="title">Document Title 1</div>

          <div id="download">DOWNLOAD</div>

          <div id="timer"></div>

        </button>

  </a>

</div>

<br>

<div id="downloadbutton" style="text-align: center;">

  <a href="http:///www.google.com">

    <button id="download_button" class="button-2">

          <div class="title">Document Title 2</div>

          <div id="download">DOWNLOAD</div>

          <div id="timer"></div>

        </button>

  </a>

</div>

Answer 1

使用不同 ID 的简单解决方案function download(btn) {&nbsp; id = Number(btn.id.slice("downloadbutton".length+1))&nbsp; var timeleft = 3;&nbsp; var downloadTimer = setInterval(function function1() {&nbsp; &nbsp; document.getElementById('download' + id).style.display = "none";&nbsp; &nbsp; document.getElementById("timer" + id).innerHTML = "Wait " + timeleft + "";&nbsp; &nbsp; if (timeleft <= 0) {&nbsp; &nbsp; &nbsp; clearInterval(downloadTimer);&nbsp; &nbsp; &nbsp; document.getElementById("timer" + id).innerHTML = ""&nbsp; &nbsp; &nbsp; //window.open(document.querySelector('#downloadbutton' + id + ' a').href, '_blank');&nbsp; &nbsp; &nbsp; document.getElementById('download' + id).style.display = "";&nbsp; &nbsp; }&nbsp; &nbsp; timeleft -= 1;&nbsp; }, 1000);}.container {&nbsp; position: absolute;&nbsp; left: 50%;&nbsp; top: 50%;&nbsp; transform: translate(-50%, -50%);&nbsp; text-align: center;}#download_button {&nbsp; border: none;&nbsp; margin-top: 0px;&nbsp; padding: 10px;&nbsp; width: 200px;&nbsp; font-family: "montserrat", sans-serif;&nbsp; text-transform: uppercase;&nbsp; border-radius: 6px;&nbsp; cursor: pointer;&nbsp; color: #fff;&nbsp; font-size: 16px;&nbsp; transition: 0.4s;&nbsp; line-height: 28px;&nbsp; outline: none;}.button-1 {&nbsp; background: #f12711;}.button-2 {&nbsp; background: #0575E6;}.button-3 {&nbsp; background: #fe8c00;}#download_button:hover {&nbsp; background: #000000;}.title {&nbsp; font-weight: bold;}<div id="downloadbutton1" style="text-align: center;">&nbsp; &nbsp; <button id="download_button1" class="button-1" onclick="download(this)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="title">Document Title 1</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="download1">DOWNLOAD</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="timer1"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button></div><br><div id="downloadbutton2" style="text-align: center;">&nbsp; &nbsp; <button id="download_button2" class="button-2" onclick="download(this)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="title">Document Title 2</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="download2">DOWNLOAD</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="timer2"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button></div><br><div id="downloadbutton3" style="text-align: center;">&nbsp; &nbsp; <button id="download_button3" class="button-3" onclick="download(this)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="title">Document Title 3</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="download3">DOWNLOAD</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="timer3"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button></div>