How to get my javascript function to start on element click?
Question
My code is as below, but it seems to start immediately on page load, when I want it to start when an element is clicked on. Not sure why it is firing on page load?
The code removes the 'next question' and 'prev question' elements from view when the timer is elapsed so the user must end the quiz.
The element to be clicked on (for example #pretest) should theoretically disappear at the same time and commence the timer, but each method I try either breaks the timer or the timer ignores the rule completely.
Total JS newbie.
$(function() {
$('#next-question,#prev-question').removeAttr('disabled');
setTimeout(enableButton, 678000);
function enableButton(){
$('#next-question,#prev-question').css( 'display', 'none' );
$('#next-question,#prev-question').attr("disabled", "false");
}
});
function countdown() {
var m = $('.min');
var s = $('.sec');
if(m.length == 0 && parseInt(s.html()) <= 0) {
$('.displayCounter_ng').html('Test Complete');
}
if(parseInt(s.html()) <= 0) {
m.html(parseInt(m.html()-1));
s.html(60);
}
if(parseInt(m.html()) <= 0) {
$('.displayCounter_ng').html('<span class="sec">59</span> seconds');
}
s.html(parseInt(s.html()-1));
}
setInterval('countdown()',1000);
2 answers
solution1
0 2015-02-10 00:17:14
Your function is running at page load because you have
setInterval('countdown()',1000);
after your function definitions. This means that the browser is executing your countdown() code every 1000 milliseconds (every second). Instead you could set it up like this and run onclick for whatever #pretest is
index.html
<html>
<head>
<script type="text/javascript" src="js/counter.js"></script>
<head>
<body>
<button id="pretest" onclick="countdown()">Click to start test</button>
</body>
</html>
counter.js
function countdown() {
setInterval(function() {
// ... Countdown code here
}, 1000);
}
solution2
0 2015-02-10 00:53:33
Just like Barmar and Cracker0dks said, the setInterval fires as soon as the page loads, so you should instead put it in an onclick listener. With jquery it is
$('#pretest').click(function(){
id = setInterval(function(){countdown();}, 1000); //you'll need the id later
});
Note that you keep the result returned from the setInterval as you'll need it to clear the interval when you're done with it.
Since you want to hide perform some actions as soon as the button is clicked, ie hide the buttons, you should add that to the onclick listener, so it becomes
$('#pretest').click(function(){
//Hide elements here
$('#next-question,#prev-question').hide();
id = setInterval(function(){countdown();}, 1000);
});
It seems like you also want the timer action end when the time is zero and enable some buttons, so you need to edit your countdown function to clear the timer an show the buttons when the time reaches zero, so it should become:
function countdown() {
var m = $('.min');
var s = $('.sec');
if(m.length == 0 && parseInt(s.html()) <= 0) {
window.clearInterval(id);
enableButton();
$('.displayCounter_ng').html('Test Complete');
}
if(parseInt(s.html()) <= 0) {
m.html(parseInt(m.html()-1));
s.html(60);
}
if(parseInt(m.html()) <= 0) {
$('.displayCounter_ng').html('<span class="sec">59</span> seconds');
}
s.html(parseInt(s.html()-1));
}
Here's a link to the fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.