如何获得我的JavaScript函数以单击元素开始？
[英]How to get my javascript function to start on element click?
问题描述
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. 理论上，要单击的元素（例如#pretest）应同时消失并启动计时器，但是我尝试的每种方法都会中断计时器或计时器完全忽略该规则。
Total JS newbie. JS新手总数。
$(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 个解决方案
解决方案1
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). 这意味着浏览器每隔1000毫秒（每秒）执行一次countdown（）代码。 Instead you could set it up like this and run onclick for whatever #pretest is 相反，您可以像这样设置它并运行onclick进行任何#pretest测试
index.html 的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 counter.js
function countdown() {
setInterval(function() {
// ... Countdown code here
}, 1000);
}
解决方案2
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. 就像Barmar和Cracker0dks所说的那样，setInterval在页面加载后立即触发，因此您应该将其放入onclick侦听器中。 With jquery it is 与jQuery的是
$('#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. 请注意，您要保留从setInterval返回的结果，因为完成该过程后将需要它来清除时间间隔。
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 由于您想在单击按钮后立即隐藏执行某些操作，即隐藏按钮，因此应将其添加到onclick侦听器中，这样它就成为
$('#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));
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.