Javascript 如何在jQuery中单击按钮调用函数

我在jQuery中编写了一段代码：

<span id="counter-up" class="timer">
</span>

<div class="buttons">
    <button id="trigger">Result!</button>
</div>
</div>
<div class="container">
</div>

<script>
    var Numbers = 30;

    function secondPassed() {
        var random = Math.random() * 2024 + 10;
        random = parseInt(random);
        document.getElementById('counter-up').innerHTML = random;
        if (Numbers == 0) {
            clearInterval(countdownTimer);
            document.getElementById('counter-up').innerHTML = "2024";
        } else {
            Numbers--;
        }
    }

    var countdownTimer = setInterval('secondPassed()', 100);
</script>

结果！
变量数=30；
函数secondPassed（）{
var random=Math.random（）*2024+10；
random=parseInt（随机）；
document.getElementById（'counter-up'）。innerHTML=random；
如果（数字==0）{
清除间隔（倒计时）；
document.getElementById（'counter-up'）.innerHTML=“2024”；
}否则{
数字--；
}
}
var countdownTimer=setInterval（'secondPassed（）'，100）；

---

在该代码中，加载页面时调用函数

secondPassed

。我希望当我单击Id为

trigger

的按钮时调用此函数。如何实现这一点？

在元素上绑定事件并将处理程序作为函数引用传递

$('#trigger').click(secondPassed);

我还建议对setInterval函数使用非字符串回调

var countdownTimer = setInterval(secondPassed, 100);

您需要重置变量以使计时器工作

不要将函数的字符串版本用作调用

setInterval

使用函数引用

在页面上包含jQuery后，可以使用它来操作DOM

现场演示

var编号=30，
倒计时；
var$counter=$（“#counter up”）；
函数secondPassed（）{
var random=parseInt（Math.random（）*2024+10,10）；
$counter.html（随机）；
如果（数字==0）{
清除间隔（倒计时）；
$counter.innerHTML=“2024”；
}否则{
数字--；
}
}
倒计时=设置间隔（秒通过，100）；
$（“#触发器”）。单击（函数（）{
数字=30；
倒计时=设置间隔（秒通过，100）；
});

结果！
试试这个

<script>
    $(function() {
        $('#trigger').on('click', function() {
            secondPassed();
        });
    });
    var Numbers = 30;

    function secondPassed() {
        var random = Math.random() * 2024 + 10;
        random = parseInt(random);
        document.getElementById('counter-up').innerHTML = random;
        if (Numbers == 0) {
            clearInterval(countdownTimer);
            document.getElementById('counter-up').innerHTML = "2024";
        } else {
            Numbers--;
        }
    }

    var countdownTimer = setInterval(secondPassed(), 100);
</script>


$（函数（）{
$（'#trigger'）。在（'click'，function（）上{
第二次通过（）；
});
});
变量数=30；
函数secondPassed（）{
var random=Math.random（）*2024+10；
random=parseInt（随机）；
document.getElementById（'counter-up'）。innerHTML=random；
如果（数字==0）{
清除间隔（倒计时）；
document.getElementById（'counter-up'）.innerHTML=“2024”；
}否则{
数字--；
}
}
var countdownTimer=setInterval（secondPassed（），100）；
尝试执行以下操作：

$(document).ready(function(){
    secondPassed();//after document ready
    $('#trigger').on('click',function(){
           secondPassed();//onclick of button
    });

});


D=文件
$（D）.就绪（函数（）{
$（“#触发器”）。单击（函数（）{
变量数=30；
var random=Math.random（）*2024+10；
random=parseInt（随机）；
document.getElementById（'counter-up'）。innerHTML=random；
如果（数字==0）{
清除间隔（倒计时）；
document.getElementById（'counter-up'）.innerHTML=“2024”；
}否则{
数字--；
}
});
});

我希望它能起作用，但所有答案都很接近，我想：D
我想在页面第一次加载时做这两件事，然后它应该工作，在按钮单击后，此函数应该加载，并且在控制台中获得错误secondPassed未定义引用错误：secondPassed未定义
<script>
    D = document

    $(D).ready(function() {

        $("#trigger").click(function() {
            var Numbers = 30;
            var random = Math.random() * 2024 + 10;
            random = parseInt(random);
            document.getElementById('counter-up').innerHTML = random;
            if (Numbers == 0) {
                clearInterval(countdownTimer);
                document.getElementById('counter-up').innerHTML = "2024";
            } else {
                Numbers--;
            }
        });


    });
</script>