连接JavaScript到HTML按钮出现问题

Question

我正在使用Javascript/HTML为游戏制作一个10秒倒计时。目前代码在加载时运行。但是，问题在于我无法将其链接到按钮，以便我可以通过onclick触发代码。

function countdown(secs,elem){
 var element= document.getElementById(elem);
 element.innerHTML = "Time is running out.." +secs+ " seconds";

 secs--;
 var timer = setTimeout('countdown('+secs+' ,"'+elem+'")',1000);

 if (secs<1) {
 clearTimeout(timer);
 element.innerHTML="<h1> GAME OVER!</h1>";
 };
}

<div class="clock">
 <div id="status"></div>
 <script type="text/javascript">countdown(10,"status");</script>
</div>

我尝试了很多不同的方法，但似乎无法让其工作。希望能得到帮助，谢谢。

- user5450631

Answer 1

 function countdown(secs, elem) {
   var element = document.getElementById(elem);
   element.innerHTML = "Time is running out.." + secs + " seconds";

   secs--;
   var timer = setTimeout('countdown(' + secs + ' ,"' + elem + '")', 1000);

   if (secs < 1) {
     clearTimeout(timer);
     element.innerHTML = "<h1> GAME OVER!</h1>";
   };
 }

<div class="clock">
  <div id="status"></div>
  <button onclick="countdown(10,'status');">Click Me</button>
</div>

- Lucky Chingi

---

没有按钮和事件 ;) - Lucky Chingi

当执行到 OP 代码中的 countdown(10,"status"); 时，函数不应该被调用吗？ - Spikatrix

目前代码在加载时执行，这一点在问题中有提到。但是问题在于我无法将其与按钮链接起来，以便我可以在单击时触发该代码。 - Lucky Chingi

哦，好的。但是为什么我在运行OP的代码时看不到输出？ - Spikatrix

我在页面上看到了“countdown未定义”的错误，也许一个body onload会有所帮助，但我假设代码在提问中提到的他的电脑上可以正常工作。 - Lucky Chingi

Answer 2

试试这个，你可以参考tutorial。

function countdown(secs, elem) {
  var element = document.getElementById(elem);
  element.innerHTML = "Time is running out.." + secs + " seconds";

  secs--;
  var timer = setTimeout('countdown(' + secs + ' ,"' + elem + '")', 1000);

  if (secs < 1) {
    clearTimeout(timer);
    element.innerHTML = "<h1> GAME OVER!</h1>";
  };
}

<div class="clock">
  <div id="status"></div>
</div>
<button onclick="countdown(10,'status')">start</button>

- Azad