Hide button until button is clicked-CodePudding

I want to hide the id="Watch" button. until the button is clicked The countdown ends Then the id="Watch" button appears.

function DelayRedirect() {
    var seconds = 10;
    var dvCountDown = document.getElementById("dvCountDown");
    var lblCount = document.getElementById("lblCount");
    dvCountDown.style.display = "block";
    lblCount.innerHTML = seconds;
    setInterval(function () {
        seconds--;
        lblCount.innerHTML = seconds;
        if (seconds == 0) {
            dvCountDown.style.display = "none";
            window.location = "#Watch";
        }
    }, 1000);
}

    <button  onclick="DelayRedirect()">continue</button>
    
    <div id="dvCountDown" style = "display:none">
You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.
</div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

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

CodePudding user response：

just set opacity 0 on #Watch and when button1 is clicked set opacity = 1 on #Watch. After the countdown reset #Watch opacity to 0.

CodePudding user response：

You can do this,

Adding display to none in HTML by default,

<button style="display : none" id="Watch"><a href="https://www.youtube.com/" target="_blank">Watch</i></a></button>

After this grab the button and set display to block once you click the button.

let one = document.querySelector(".button1");
let second = document.querySelector("#Watch");
one.addEventListener("click" , DelayRedirect);
function DelayRedirect() {
  second.style.display = "block";
  var seconds = 10;
  var dvCountDown = document.getElementById("dvCountDown");
  var lblCount = document.getElementById("lblCount");
  dvCountDown.style.display = "block";
  lblCount.innerHTML = seconds;
  setInterval(function () {
      seconds--;
      lblCount.innerHTML = seconds;
      if (seconds === 0) {
          dvCountDown.style.display = "none";
          window.location = "#Watch";
      }
  }, 1000);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My Website</title>
    <!-- <script src="./src/index.js" defer ></script> -->
  </head>
  <body>
    <button  >continue</button>
    
    <div id="dvCountDown" style = "display:none">
You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.
</div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <button style="display : none" id="Watch"><a  href="https://www.youtube.com/" target="_blank">Watch</i></a></button>
    <script src="./src/index.js"></script>
    <!-- added defer also -->
  </body>
</html>

CodePudding user response：

You need to give it display: none by default, and after ten seconds give it display: inline, also you should stop the interval as it will run forever.

function DelayRedirect() {
    var seconds = 10;
    var dvCountDown = document.getElementById("dvCountDown");
    var lblCount = document.getElementById("lblCount");
    dvCountDown.style.display = "block";
    lblCount.innerHTML = seconds;
    const timeout = setInterval(function () {
        seconds--;
        lblCount.innerHTML = seconds;
        if (seconds == 0) {
            dvCountDown.style.display = "none";
            document.getElementById('Watch').style.display = 'inline';
            window.location = "#Watch";
            clearInterval(timeout)
        }
    }, 1000);
}

#Watch {
  display: none;
}

<button  onclick="DelayRedirect()">continue</button>
    
    <div id="dvCountDown" style = "display:none">
You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.
</div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

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

CodePudding user response：

This can be solved by using the hidden attribute on the button

For The Html

<button >continue</button>
    
    <div id="dvCountDown" style = "display:none">
You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.
</div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--I would recommend using CSS to position your elements instead of <br> tags-->

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

The Javascript Portion is

const watchButton = document.getElementById('Watch');
const button1 = document.getElementByClassName('button1');

watchButton.addEventListener('click', delayRedirect() {
    watchButton.removeAttribute('hidden');
    watchButton.setTimeout(() => {
           watchButton.setAttribute('hidden', 'true');
     }
,10000)

})