как добавить событие onclick для запуска таймера - PullRequest
Новая
       14

как добавить событие onclick для запуска таймера

0 голосов
/ 11 февраля 2019

Новое в кодировании.Создан таймер, который я хотел бы запустить при нажатии кнопки «gameStart» вместо загрузки страницы.Не уверен, куда вставить мой "onclick".Спасибо 

<div id= "startButtons">
        <button  id= "gameStart">Get Going!</button>

<script>

var timeleft = 15;

var downloadTimer = setInterval(function function1(){
  document.getElementById("countdown").innerHTML = timeleft + 
"&nbsp"+"seconds remaining";

  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Time is up!"
  }
}, 1000);

    console.log(countdown);

</script>

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

Вам просто нужно добавить функцию щелчка Event Listener к вашему div.

Вот какой-то рабочий код:

document.getElementById("gameStart").addEventListener("click", function(){
    var timeleft = 15;

    var downloadTimer = setInterval(function function1(){
    document.getElementById("countdown").innerHTML = timeleft + 
    "&nbsp"+"seconds remaining";

    timeleft -= 1;
    if(timeleft <= 0){
        clearInterval(downloadTimer);
        document.getElementById("countdown").innerHTML = "Time is up!"
    }
    }, 1000);

    console.log(countdown);
});
        <div id= "startButtons">
          <button  id= "gameStart">Get Going!</button>
        </div>
        <div id= "countdown"></div>
0 голосов
/ 11 февраля 2019

Вам нужно нажать на кнопку , простая модификация вашего кода поможет вам в достижении того, что вы хотели. 

<p id="countdown"></p>
<div id= "startButtons">
    <button onclick="sample()" id= "gameStart">Get Going!</button>

<script>

var timeleft = 15;
function sample() {
var downloadTimer = setInterval(function 
   function1(){ 
document.getElementById("countdown").innerHTML = timeleft + "&nbsp"+"seconds remaining";

timeleft -= 1;
if(timeleft <= 0){
    clearInterval(downloadTimer);

document.getElementById("countdown").innerHTML = "Time is up!"
  }
}, 1000);

    console.log(countdown)
}

</script>
0 голосов
/ 11 февраля 2019

Вы помещаете на кнопку событие onclick, например: 

<div id= "startButtons">
    <button  id= "gameStart" onclick="">Get Going!</button>
</div>

Затем вам нужно изменить свою функцию, чтобы она не запускалась до щелчка: var timeleft = 15; 

// global variables for reference
var downloadTimer;

function startInterval() {  // everything inside this function that is called with click on button
downloadTimer = setInterval(function function1(){
  document.getElementById("countdown").innerHTML = timeleft + "&nbsp"+"seconds remaining";

  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
        document.getElementById("countdown").innerHTML = "Time is up!"
      }
    }, 1000);
}
...