Как вызвать функцию нажатием кнопки в JQuery

Question

Я написал код в 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> 

В этом коде функция secondPassed называется, как я загрузить страницу. Я хочу, чтобы эту функцию вызывала, когда я нажимаю кнопку с идентификатором trigger. Как я могу это достичь?

Answer 1

Bind событие на элемент и передать обработчик как функции ссылки

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

Я также рекомендую использовать не строку обратного вызова setInterval функции.

var countdownTimer = setInterval(secondPassed, 100); 

1. Вам нужно сбросить переменные, чтобы сделать работу по таймеру Через
2. Не используйте строковую версию функции в качестве обратного вызова для setInterval ссылки использования функции.
3. Как вы включили jQuery на странице, используйте его для управления DOM.

Демо

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

попробовать этот

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

Answer 3

попробовать сделать это:

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

}); 

Answer 4

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

Я надеюсь, что это работает, но весь ответ близок, что я думаю: D