Why does the game count 0, 5, 4, 3, 2, 1 instead of 5, 4, 3, 2, 1 seconds?

When I start my Clickgame after I finish the first round, the seconds count 0,5,4,3,2,1 instead of 5,4,3,2,1. Does anyone know whats the mistake in the code and what to change? So it's like the 5 is counted double.

The other thing I want to know, how can I add a function (input HTML) to add a popup where user can choose their own time of seconds they want to play?

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;



  zeit = setInterval(function() {

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);







      clearInterval(zeit)



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet





  }, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button>Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

edited Nov 14 '18 at 16:19

Rory McCrossan

245k29212248

asked Nov 14 '18 at 16:17

sharete

147

1

Please use a StackOverflow snippet so that your code is runnable.

– sjahan
Nov 14 '18 at 16:17

How can I do that? Sorry I'm new to this.

– sharete
Nov 14 '18 at 16:18

1

It only has that behaviour from the second time you click start. I would assume from that behaviour you're not resetting your counter variable correctly when you clear the original timer.

– Rory McCrossan
Nov 14 '18 at 16:19

You can click the [<>] button in the question editor. I've done it for you in this case

– Rory McCrossan
Nov 14 '18 at 16:19

2

The problem appears to be that your setInterval function runs only every second - obviously that's what you wanted, but it means you have to wait a second even before the first time, which is when the variable is reset to 5 after reaching 0 the previous time.

– Robin Zigmond
Nov 14 '18 at 16:23

|
show 2 more comments

The other thing I want to know, how can I add a function (input HTML) to add a popup where user can choose their own time of seconds they want to play?

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;



  zeit = setInterval(function() {

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);







      clearInterval(zeit)



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet





  }, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button>Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

edited Nov 14 '18 at 16:19

Rory McCrossan

245k29212248

asked Nov 14 '18 at 16:17

sharete

147

1

Please use a StackOverflow snippet so that your code is runnable.

– sjahan
Nov 14 '18 at 16:17

How can I do that? Sorry I'm new to this.

– sharete
Nov 14 '18 at 16:18

1

It only has that behaviour from the second time you click start. I would assume from that behaviour you're not resetting your counter variable correctly when you clear the original timer.

– Rory McCrossan
Nov 14 '18 at 16:19

You can click the [<>] button in the question editor. I've done it for you in this case

– Rory McCrossan
Nov 14 '18 at 16:19

2

The problem appears to be that your setInterval function runs only every second - obviously that's what you wanted, but it means you have to wait a second even before the first time, which is when the variable is reset to 5 after reaching 0 the previous time.

– Robin Zigmond
Nov 14 '18 at 16:23

|
show 2 more comments

The other thing I want to know, how can I add a function (input HTML) to add a popup where user can choose their own time of seconds they want to play?

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;



  zeit = setInterval(function() {

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);







      clearInterval(zeit)



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet





  }, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button>Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

edited Nov 14 '18 at 16:19

Rory McCrossan

245k29212248

asked Nov 14 '18 at 16:17

sharete

147

The other thing I want to know, how can I add a function (input HTML) to add a popup where user can choose their own time of seconds they want to play?

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;



  zeit = setInterval(function() {

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);







      clearInterval(zeit)



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet





  }, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button>Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;



  zeit = setInterval(function() {

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);







      clearInterval(zeit)



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet





  }, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button>Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;



  zeit = setInterval(function() {

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);







      clearInterval(zeit)



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet





  }, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button>Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

javascript jquery html

edited Nov 14 '18 at 16:19

Rory McCrossan

245k29212248

asked Nov 14 '18 at 16:17

sharete

147

edited Nov 14 '18 at 16:19

Rory McCrossan

245k29212248

asked Nov 14 '18 at 16:17

sharete

147

edited Nov 14 '18 at 16:19

Rory McCrossan

245k29212248

edited Nov 14 '18 at 16:19

Rory McCrossan

245k29212248

edited Nov 14 '18 at 16:19

Rory McCrossan

245k29212248

asked Nov 14 '18 at 16:17

sharete

147

asked Nov 14 '18 at 16:17

sharete

147

asked Nov 14 '18 at 16:17

sharete

147

1

Please use a StackOverflow snippet so that your code is runnable.

– sjahan
Nov 14 '18 at 16:17

How can I do that? Sorry I'm new to this.

– sharete
Nov 14 '18 at 16:18

1

It only has that behaviour from the second time you click start. I would assume from that behaviour you're not resetting your counter variable correctly when you clear the original timer.

– Rory McCrossan
Nov 14 '18 at 16:19

You can click the [<>] button in the question editor. I've done it for you in this case

– Rory McCrossan
Nov 14 '18 at 16:19

2

The problem appears to be that your setInterval function runs only every second - obviously that's what you wanted, but it means you have to wait a second even before the first time, which is when the variable is reset to 5 after reaching 0 the previous time.

– Robin Zigmond
Nov 14 '18 at 16:23

|
show 2 more comments

1

Please use a StackOverflow snippet so that your code is runnable.

– sjahan
Nov 14 '18 at 16:17

How can I do that? Sorry I'm new to this.

– sharete
Nov 14 '18 at 16:18

1

It only has that behaviour from the second time you click start. I would assume from that behaviour you're not resetting your counter variable correctly when you clear the original timer.

– Rory McCrossan
Nov 14 '18 at 16:19

You can click the [<>] button in the question editor. I've done it for you in this case

– Rory McCrossan
Nov 14 '18 at 16:19

2

The problem appears to be that your setInterval function runs only every second - obviously that's what you wanted, but it means you have to wait a second even before the first time, which is when the variable is reset to 5 after reaching 0 the previous time.

– Robin Zigmond
Nov 14 '18 at 16:23

Please use a StackOverflow snippet so that your code is runnable.

– sjahan
Nov 14 '18 at 16:17

How can I do that? Sorry I'm new to this.

– sharete
Nov 14 '18 at 16:18

It only has that behaviour from the second time you click start. I would assume from that behaviour you're not resetting your counter variable correctly when you clear the original timer.

– Rory McCrossan
Nov 14 '18 at 16:19

You can click the [<>] button in the question editor. I've done it for you in this case

– Rory McCrossan
Nov 14 '18 at 16:19

The problem appears to be that your setInterval function runs only every second - obviously that's what you wanted, but it means you have to wait a second even before the first time, which is when the variable is reset to 5 after reaching 0 the previous time.

– Robin Zigmond
Nov 14 '18 at 16:23

|
show 2 more comments

2 Answers
2

active

oldest

votes

As user @Robin Zigmond suggested, because you are using setInterval, you are waiting a second before you even run your interval each time.

A potential solution to this is surround your code in a function, call it first, and then set your interval.

I've attached a working solution below :

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;

  runTimer();

  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)

  function runTimer(){

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);



      clearInterval(zeit);



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet



}

  



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<head>

<link href="style.css" rel="stylesheet">

</head>



<body>



<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button >Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

</body>

Apologies, I do not speak the same language as the documentation, so the comments may be off.

edited Nov 14 '18 at 16:39

answered Nov 14 '18 at 16:35

cmprogram

1,189619

Uncaught ReferenceError: $ is not defined

– Christoph
Nov 14 '18 at 16:35

@Christoph Apologies, error with the snippet. Amended.

– cmprogram
Nov 14 '18 at 16:39

This works for me! Thanks for your help, you don't have to worry about the language, I can handle that!

– sharete
Nov 15 '18 at 9:42

add a comment |

I guess your counting mechanism is way too complicated. Here is a simplified version of what you are trying to achieve:

let c = 0

document.getElementById('count').addEventListener('click', function() {

  c++

})

document.getElementById('timer').addEventListener('click', function() {

  let number = 5

  let interval = setInterval(function() {

    document.getElementById('thenumber').innerHTML = number

    number--

    if (number == -1) {

      alert('You clicked: ' + c)

      c = 0

      clearInterval(interval)

    }

  }, 1000)

})

<div id="thenumber"></div>

<button id="timer">klick me</button>

<button id="count">count</button>

answered Nov 14 '18 at 16:33

messerbill

3,0941225

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304548%2fwhy-does-the-game-count-0-5-4-3-2-1-instead-of-5-4-3-2-1-seconds%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

As user @Robin Zigmond suggested, because you are using setInterval, you are waiting a second before you even run your interval each time.

A potential solution to this is surround your code in a function, call it first, and then set your interval.

I've attached a working solution below :

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;

  runTimer();

  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)

  function runTimer(){

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);



      clearInterval(zeit);



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet



}

  



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<head>

<link href="style.css" rel="stylesheet">

</head>



<body>



<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button >Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

</body>

Apologies, I do not speak the same language as the documentation, so the comments may be off.

edited Nov 14 '18 at 16:39

answered Nov 14 '18 at 16:35

cmprogram

1,189619

Uncaught ReferenceError: $ is not defined

– Christoph
Nov 14 '18 at 16:35

@Christoph Apologies, error with the snippet. Amended.

– cmprogram
Nov 14 '18 at 16:39

This works for me! Thanks for your help, you don't have to worry about the language, I can handle that!

– sharete
Nov 15 '18 at 9:42

add a comment |

As user @Robin Zigmond suggested, because you are using setInterval, you are waiting a second before you even run your interval each time.

A potential solution to this is surround your code in a function, call it first, and then set your interval.

I've attached a working solution below :

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;

  runTimer();

  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)

  function runTimer(){

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);



      clearInterval(zeit);



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet



}

  



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<head>

<link href="style.css" rel="stylesheet">

</head>



<body>



<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button >Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

</body>

Apologies, I do not speak the same language as the documentation, so the comments may be off.

edited Nov 14 '18 at 16:39

answered Nov 14 '18 at 16:35

cmprogram

1,189619

Uncaught ReferenceError: $ is not defined

– Christoph
Nov 14 '18 at 16:35

@Christoph Apologies, error with the snippet. Amended.

– cmprogram
Nov 14 '18 at 16:39

This works for me! Thanks for your help, you don't have to worry about the language, I can handle that!

– sharete
Nov 15 '18 at 9:42

add a comment |

As user @Robin Zigmond suggested, because you are using setInterval, you are waiting a second before you even run your interval each time.

A potential solution to this is surround your code in a function, call it first, and then set your interval.

I've attached a working solution below :

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;

  runTimer();

  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)

  function runTimer(){

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);



      clearInterval(zeit);



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet



}

  



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<head>

<link href="style.css" rel="stylesheet">

</head>



<body>



<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button >Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

</body>

Apologies, I do not speak the same language as the documentation, so the comments may be off.

edited Nov 14 '18 at 16:39

answered Nov 14 '18 at 16:35

cmprogram

1,189619

As user @Robin Zigmond suggested, because you are using setInterval, you are waiting a second before you even run your interval each time.

A potential solution to this is surround your code in a function, call it first, and then set your interval.

I've attached a working solution below :

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;

  runTimer();

  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)

  function runTimer(){

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);



      clearInterval(zeit);



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet



}

  



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<head>

<link href="style.css" rel="stylesheet">

</head>



<body>



<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button >Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

</body>

Apologies, I do not speak the same language as the documentation, so the comments may be off.

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;

  runTimer();

  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)

  function runTimer(){

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);



      clearInterval(zeit);



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet



}

  



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<head>

<link href="style.css" rel="stylesheet">

</head>



<body>



<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button >Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

</body>

let klick = 0;

display = document.querySelector('#time');



$("#start").click(function() { //clickfunktion beim starten.

  $("#start").fadeOut(); //Der Startbutton geht weg

  $("#welcome").fadeOut(); // Das Willkommensschild geht weg



  $("#time").fadeIn(900); //Timer kommt 

  $("#clicker").animate({

    height: 'toggle'

  }); //clicker wird gestartet 



  var dauer = 5;



  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  

})



function startTimer(dauer) {

  let timer = 5;

  runTimer();

  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)

  function runTimer(){

    display.textContent = parseInt(timer); // zeigt sekunden-variable



    --timer; //setzt den timer immer einen herab



    if (timer < 0.00) {



      timer = 5;

      console.log(timer);

      $("#start").fadeIn();

      $("#welcome").fadeIn();

      $("#time").fadeOut();

      $("#clicker").fadeOut();

      $("#clicker").css("margin-top", "10%");

      $("#clicker").css("margin-left", "50%");



      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");



      klick = 0

      console.log(timer);



      clearInterval(zeit);



    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet



}

  



};



$("#clicker").click(function() {

  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker

  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert



  klick = klick + 1 //setzt den zähler beim klicken eins hoch

  if (klick % 2 == 0) {

    $("#clicker").animate({

      opacity: '0.3',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle

  } else {

    $("#clicker").animate({

      opacity: '1.0',

      left: zufall + "%",

      top: zufal + "%"

    }, "fast")



  }





});

<head>

<link href="style.css" rel="stylesheet">

</head>



<body>



<div><span id="time"></span> </div>

<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>

<button id="start" type=button >Start</button>

<button id="clicker" type=button>KLICK</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="index.js"></script>

</body>

edited Nov 14 '18 at 16:39

answered Nov 14 '18 at 16:35

cmprogram

1,189619

edited Nov 14 '18 at 16:39

answered Nov 14 '18 at 16:35

cmprogram

1,189619

answered Nov 14 '18 at 16:35

cmprogram

1,189619

answered Nov 14 '18 at 16:35

cmprogram

1,189619

Uncaught ReferenceError: $ is not defined

– Christoph
Nov 14 '18 at 16:35

@Christoph Apologies, error with the snippet. Amended.

– cmprogram
Nov 14 '18 at 16:39

This works for me! Thanks for your help, you don't have to worry about the language, I can handle that!

– sharete
Nov 15 '18 at 9:42

add a comment |

Uncaught ReferenceError: $ is not defined

– Christoph
Nov 14 '18 at 16:35

@Christoph Apologies, error with the snippet. Amended.

– cmprogram
Nov 14 '18 at 16:39

This works for me! Thanks for your help, you don't have to worry about the language, I can handle that!

– sharete
Nov 15 '18 at 9:42

Uncaught ReferenceError: $ is not defined

– Christoph
Nov 14 '18 at 16:35

@Christoph Apologies, error with the snippet. Amended.

– cmprogram
Nov 14 '18 at 16:39

This works for me! Thanks for your help, you don't have to worry about the language, I can handle that!

– sharete
Nov 15 '18 at 9:42

add a comment |

I guess your counting mechanism is way too complicated. Here is a simplified version of what you are trying to achieve:

let c = 0

document.getElementById('count').addEventListener('click', function() {

  c++

})

document.getElementById('timer').addEventListener('click', function() {

  let number = 5

  let interval = setInterval(function() {

    document.getElementById('thenumber').innerHTML = number

    number--

    if (number == -1) {

      alert('You clicked: ' + c)

      c = 0

      clearInterval(interval)

    }

  }, 1000)

})

<div id="thenumber"></div>

<button id="timer">klick me</button>

<button id="count">count</button>

answered Nov 14 '18 at 16:33

messerbill

3,0941225

add a comment |

I guess your counting mechanism is way too complicated. Here is a simplified version of what you are trying to achieve:

let c = 0

document.getElementById('count').addEventListener('click', function() {

  c++

})

document.getElementById('timer').addEventListener('click', function() {

  let number = 5

  let interval = setInterval(function() {

    document.getElementById('thenumber').innerHTML = number

    number--

    if (number == -1) {

      alert('You clicked: ' + c)

      c = 0

      clearInterval(interval)

    }

  }, 1000)

})

<div id="thenumber"></div>

<button id="timer">klick me</button>

<button id="count">count</button>

answered Nov 14 '18 at 16:33

messerbill

3,0941225

add a comment |

I guess your counting mechanism is way too complicated. Here is a simplified version of what you are trying to achieve:

let c = 0

document.getElementById('count').addEventListener('click', function() {

  c++

})

document.getElementById('timer').addEventListener('click', function() {

  let number = 5

  let interval = setInterval(function() {

    document.getElementById('thenumber').innerHTML = number

    number--

    if (number == -1) {

      alert('You clicked: ' + c)

      c = 0

      clearInterval(interval)

    }

  }, 1000)

})

<div id="thenumber"></div>

<button id="timer">klick me</button>

<button id="count">count</button>

answered Nov 14 '18 at 16:33

messerbill

3,0941225

I guess your counting mechanism is way too complicated. Here is a simplified version of what you are trying to achieve:

let c = 0

document.getElementById('count').addEventListener('click', function() {

  c++

})

document.getElementById('timer').addEventListener('click', function() {

  let number = 5

  let interval = setInterval(function() {

    document.getElementById('thenumber').innerHTML = number

    number--

    if (number == -1) {

      alert('You clicked: ' + c)

      c = 0

      clearInterval(interval)

    }

  }, 1000)

})

<div id="thenumber"></div>

<button id="timer">klick me</button>

<button id="count">count</button>

let c = 0

document.getElementById('count').addEventListener('click', function() {

  c++

})

document.getElementById('timer').addEventListener('click', function() {

  let number = 5

  let interval = setInterval(function() {

    document.getElementById('thenumber').innerHTML = number

    number--

    if (number == -1) {

      alert('You clicked: ' + c)

      c = 0

      clearInterval(interval)

    }

  }, 1000)

})

<div id="thenumber"></div>

<button id="timer">klick me</button>

<button id="count">count</button>

let c = 0

document.getElementById('count').addEventListener('click', function() {

  c++

})

document.getElementById('timer').addEventListener('click', function() {

  let number = 5

  let interval = setInterval(function() {

    document.getElementById('thenumber').innerHTML = number

    number--

    if (number == -1) {

      alert('You clicked: ' + c)

      c = 0

      clearInterval(interval)

    }

  }, 1000)

})

<div id="thenumber"></div>

<button id="timer">klick me</button>

<button id="count">count</button>

answered Nov 14 '18 at 16:33

messerbill

3,0941225

answered Nov 14 '18 at 16:33

messerbill

3,0941225

answered Nov 14 '18 at 16:33

messerbill

3,0941225

answered Nov 14 '18 at 16:33

messerbill

3,0941225

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky