Adjustment of the button appears after the waiting counter-CodePudding

The button appears after the wait counter that appears automatically when the page is loaded

I want the counter to appear only after pressing the button and the seconds counter appear and then the button to be converted to appears inside the <a tag

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can download the file in "   counter.toString()   " seconds.";
}}, 1000);

<button id="download"><a href="https://www.youtube.com/">Watch</a></button>

CodePudding user response：

Create a function that handles the action. Then pass it to an EventListener triggered on button click.
The function will run after you click the button

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");

downloadButton.addEventListener('click', () => countDown())

const countDown = () => {
  newElement.innerHTML = "You can download the file in 10 seconds.";
  var id;
  // Reset the counter
  counter = 10
  downloadButton.parentNode.replaceChild(newElement, downloadButton);
  id = setInterval(function() {
    counter--;
    if (counter < 0) {
      newElement.parentNode.replaceChild(downloadButton, newElement);
      clearInterval(id);
    } else {
      newElement.innerHTML = "You can download the file in "   counter.toString()   " seconds.";
    }
  }, 1000);
}

<button id="download"><a target="_blank" href="https://www.youtube.com/">Watch</a></button>

CodePudding user response：

<button id="download" onclick="count()"><a href="https://www.youtube.com/">Watch</a></button>

<script>
function count() {
    var downloadButton = document.getElementById("download");
    var counter = 10;
    var newElement = document.createElement("p");
    newElement.innerHTML = "You can download the file in 10 seconds.";
    var id;
    downloadButton.parentNode.replaceChild(newElement, downloadButton);
    id = setInterval(function() {
    counter--;
    if(counter < 0) {
    newElement.parentNode.replaceChild(downloadButton, newElement);
    clearInterval(id);
    } else {
    newElement.innerHTML = "You can download the file in "   counter.toString()   " seconds.";
    }}, 1000);
}
</script>