在setTimeout之后动态创建的锚不起作用

Question

Hi I make a Timer with Javascript, it works fine. And when it finish the 5 seconds count the code enable a target for open a web, but when I click its dont working. I try this code outside the timer and its works perfectly. What is the error?

<?php
$windowsOpen .= "window.open('$value', '_blank');";
?>

<script type="text/javascript">
function countDown(secs,elem){
var element = document.getElementById(elem);
element.innerHTML = "Please wait for "+secs+" seconds";
if(secs < 1){
    clearTimeout(timer);
    element.innerHTML='<p><a href="#" onclick="<?= $windowsOpen; ?>">Click to open webs</a></p>';
}
secs--;
var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}
</script>
<div id="status"></div>
<script type="text/javascript">countDown(5,"status");</script>

Answer 1

Inline event handlers are essentially eval inside HTML markup - they're bad practice and result in poorly factored, hard-to-manage code. Seriously consider attaching your events with JavaScript, instead: developer.mozilla.org/en/DOM/element.addEventListener

If you absolutely need the window opener to be handled with Javascript instead of the browser's nice native behavior, then define the URL you want people to navigate to upfront, and then attach a listener to the element when it's created:

<?php
$url = 'https://www.google.com';
?>

<script type="text/javascript">
var url = '<?=$url;?>';
var timer;
function countDown(secs,elem){
  var element = document.getElementById(elem);
  element.innerHTML = "Please wait for "+secs+" seconds";
  if(secs < 1){
    element.innerHTML='<p><a href="#">Click to open link</a></p>';
    element.querySelector('a')
      .addEventListener('click', () => {
        window.open(url);
      });
  } else {
    secs--;
    setTimeout(countDown, 1000, secs, elem);
  }
}
</script>
<div id="status"></div>
<script type="text/javascript">countDown(5,"status");</script>

You should also avoid using eval in your setTimeout - always write out functions in normal JS, rather than as strings to be parsed into functions.

But it would be much less user-unfriendly if you would let them click the link themselves, using the browser's normal behavior:

element.innerHTML='<p><a href="#">Click to open link</a></p>';
element.querySelector('a')
  .href = url;