4

I have got this Download button with a few seconds Timer before download but unfortunately, it is working only on 1st button but not on other buttons. I want it to work on each and every download button properly and I am not able to figure out how to fix this issue. Please help!

I have Attached a CSS, HTML, and JavaScript that I have been using.

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Raza Murad
  • 51
  • 3

2 Answers2

2

Simple solution using different IDs

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>
Shubham Srivastava
  • 1,807
  • 1
  • 10
  • 17
1

You are missing the basic rule of html,

The simple difference between the two is that while a class can be used repeatedly on a page, an ID must only be used once per page. Therefore, it is appropriate to use an ID on the div element that is marking up the main content on the page, as there will only be one main content section. In contrast, you must use a class to set up alternating row colors on a table, as they are by definition going to be used more than once...

Source: Whats-the-difference-between-an-id-and-a-class

Either you can use classes or you can use different ids, or both depending on requirements.

I have changed download_button from id to class and added EventListener with loop, the reason of using class is you are adding same EventListener to all buttons.

Then I have used different but identical Ids to download, downloadbutton and timer because your function need to select them individually, I used numbers with Id because it will be easy to select with the index of the item.

document.querySelectorAll(".download_button").forEach(function(item, index) {
  item.addEventListener("click", function(event) {
    event.preventDefault();
    var timeleft = 3;

    var downloadTimer = setInterval(function function1() {
      document.getElementById('download_' + index).style.display = "none";
      document.getElementById("timer_" + index).innerHTML = "Wait " + timeleft + "";

      if (timeleft <= 0) {
        clearInterval(downloadTimer);
        document.getElementById("timer_" + index).innerHTML = ""
        window.open(document.querySelector('#downloadbutton' + index + ' a').href, '_blank');
        document.getElementById('download_' + index).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="downloadbutton0" style="text-align: center;">
  <a href="http:///www.google.com">
    <button class="download_button button-1">
          <div class="title">Document Title 1</div>
          <div id="download_0">DOWNLOAD</div>
          <div id="timer_0"></div>
        </button>
  </a>
</div>
<br>
<div id="downloadbutton1" style="text-align: center;">
  <a href="http:///www.google.com">
    <button class="download_button button-2">
          <div class="title">Document Title 2</div>
          <div id="download_1">DOWNLOAD</div>
          <div id="timer_1"></div>
        </button>
  </a>
</div>
<br>
<div id="downloadbutton2" style="text-align: center;">
  <a href="http:///www.google.com">
    <button class="download_button button-3">
          <div class="title">Document Title 3</div>
          <div id="download_2">DOWNLOAD</div>
          <div id="timer_2"></div>
        </button>
  </a>
</div>
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68