Countdown is working on first button only but not on other buttons

Question

I need your help. I have got a download button with a countdown but there is an issue with the button. It only works on First Button or if when clicked on 2nd button first, the starts on 1st button instead of 2nd button. Please help me to fix this error. I have created a snippet with the coding. Please review it and let me know, what is wrong! Thank you.

  function generate() {
    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 = " Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
    }, 1e3)
  }

user_11926970 · Answer

One way is to pass the ID of the button using this.id, and then using that ID to get which button is clicked.

See the below example.

function generate(idOfButtonClicked){
 console.log("ID is: ", idOfButtonClicked)
}

Now coming to your code, you can pass the id as the parameters to the generate() function. Also, have to have some id downloadingx for each of the tag, you can have something like this as id for each downloadingx-btn-download-1 and downloadingx-btn-download-2 respectively.

The thing is that you cannot have the same ID for different elements on a page.

  function generate(btnId) {
    var e, n = document.getElementById(btnId),
      t = document.getElementById(btnId),
      a = document.getElementById("downloadingx-"+btnId).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 = " Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
    }, 1e3)
  }

user_3926618 · Answer

Try this

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 = " Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
    }, 1e3)
  }



      
        
          File 1
          
           Redirecting...
        
      
    
    

    
      
        
          File 1
          
           Redirecting...

user_592958 · Answer

You should really register your event listeners in JavaScript. Doing so will let you use this inside generate to refer to the element to which the event listener was bound.

From there it's trivial to locate the appropriate anchor () using nextElementSibling.

There's an added benefit that you don't need to come up with different IDs for the button and anchor elements if you have a large list (I got rid of them.)

(function() {

  function generate() {
    var e, n = this.nextElementSibling,
      t = this,
      a = this.nextElementSibling.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 = " Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
    }, 1e3)
  }

  const buttons = document.getElementsByTagName('button');

  for (let i = 0; i < buttons.length; i++) {
    const button = buttons[i];
    button.addEventListener('click', generate);
  }

})();

user_14855488 · Answer

I found your mistake. It was that first Download button and the second one had the same id. I solve by changing the second one's 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 = " 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 = " Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
}, 1e3)
}

Countdown is working on first button only but not on other buttons

4 Answers