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

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>
<br>
<div id="downloadbutton" style="text-align: center;">
  <a href="http:///www.google.com">
    <button id="download_button" class="button-3">
          <div class="title">Document Title 3</div>
          <div id="download">DOWNLOAD</div>
          <div id="timer"></div>
        </button>
  </a>
</div>

Answer 1

使用不同 ID 的简单解决方案

function download(btn) {

  id = Number(btn.id.slice("downloadbutton".length+1))

  var timeleft = 3;

  var downloadTimer = setInterval(function function1() {
    document.getElementById('download' + id).style.display = "none";
    document.getElementById("timer" + id).innerHTML = "Wait " + timeleft + "";

    if (timeleft <= 0) {
      clearInterval(downloadTimer);
      document.getElementById("timer" + id).innerHTML = ""
      //window.open(document.querySelector('#downloadbutton' + id + ' a').href, '_blank');
      document.getElementById('download' + id).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="downloadbutton1" style="text-align: center;">
    <button id="download_button1" class="button-1" onclick="download(this)">
              <div class="title">Document Title 1</div>
              <div id="download1">DOWNLOAD</div>
              <div id="timer1"></div>
            </button>
</div>
<br>
<div id="downloadbutton2" style="text-align: center;">
    <button id="download_button2" class="button-2" onclick="download(this)">
              <div class="title">Document Title 2</div>
              <div id="download2">DOWNLOAD</div>
              <div id="timer2"></div>
            </button>
</div>
<br>
<div id="downloadbutton3" style="text-align: center;">
    <button id="download_button3" class="button-3" onclick="download(this)">
              <div class="title">Document Title 3</div>
              <div id="download3">DOWNLOAD</div>
              <div id="timer3"></div>
            </button>
</div>