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

Question

I have written a code in 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>

In this code the function secondPassed is called as I load the page. I want that this function should be called when I click on button with Id trigger . How can I achieve this?

Answer 1

Bind event on the element and pass the handler as the function reference

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

I'd also recommend to use non-string callback to setInterval function.

var countdownTimer = setInterval(secondPassed, 100);

1. You need to reset the variables to make the timer work
2. Don't use string version of function as callback to setInterval use function reference.
3. As you've included jQuery on the page, use it to manipulate DOM.

Live Demo

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <span id="counter-up" class="timer"> </span> <div class="buttons"> <button id="trigger">Result!</button> </div> <div class="container"> </div>

Answer 2

try to do this:

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

});

Answer 3

<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>

I hope it works but all the answer are near that I think :D

Answer 4

try this

<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>