Why does the game count 0, 5, 4, 3, 2, 1 instead of 5, 4, 3, 2, 1 seconds?
0
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>javascript jquery html
edited Nov 14 '18 at 16:19
Rory McCrossan
245k29212248
asked Nov 14 '18 at 16:17
sharetesharete
147
|
show 2 more comments
0
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>javascript jquery html
edited Nov 14 '18 at 16:19
Rory McCrossan
245k29212248
asked Nov 14 '18 at 16:17
sharetesharete
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 yoursetIntervalfunction 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
0
0
0
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>javascript jquery html
edited Nov 14 '18 at 16:19
Rory McCrossan
245k29212248
asked Nov 14 '18 at 16:17
sharetesharete
147
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>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
javascript jquery html
edited Nov 14 '18 at 16:19
Rory McCrossan
245k29212248
asked Nov 14 '18 at 16:17
sharetesharete
147
edited Nov 14 '18 at 16:19
Rory McCrossan
245k29212248
asked Nov 14 '18 at 16:17
sharetesharete
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
245k29212248
asked Nov 14 '18 at 16:17
sharetesharete
147
asked Nov 14 '18 at 16:17
sharetesharete
147
asked Nov 14 '18 at 16:17
sharetesharete
147
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 yoursetIntervalfunction 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 yoursetIntervalfunction 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
1
1
Please use a StackOverflow snippet so that your code is runnable.
– sjahan
Nov 14 '18 at 16:17
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
How can I do that? Sorry I'm new to this.
– sharete
Nov 14 '18 at 16:18
1
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
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
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
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
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
2
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.
answered Nov 14 '18 at 16:35
cmprogramcmprogram
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 |
0
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
messerbillmesserbill
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
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.
answered Nov 14 '18 at 16:35
cmprogramcmprogram
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 |
2
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.
answered Nov 14 '18 at 16:35
cmprogramcmprogram
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 |
2
2
2
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.
answered Nov 14 '18 at 16:35
cmprogramcmprogram
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>answered Nov 14 '18 at 16:35
cmprogramcmprogram
1,189619
edited Nov 14 '18 at 16:39
answered Nov 14 '18 at 16:35
cmprogramcmprogram
1,189619
answered Nov 14 '18 at 16:35
cmprogramcmprogram
1,189619
answered Nov 14 '18 at 16:35
cmprogramcmprogram
1,189619
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
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
@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
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 |
0
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
messerbillmesserbill
3,0941225
add a comment |
0
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
messerbillmesserbill
3,0941225
add a comment |
0
0
0
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
messerbillmesserbill
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
messerbillmesserbill
3,0941225
answered Nov 14 '18 at 16:33
messerbillmesserbill
3,0941225
answered Nov 14 '18 at 16:33
messerbillmesserbill
3,0941225
answered Nov 14 '18 at 16:33
messerbillmesserbill
3,0941225
3,0941225
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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
setIntervalfunction 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