我的 jquery 点击不起作用

Question

我正在制作一个网站，我包含了 jQuery。
当我使用点击事件时，它不起作用。

HTML

<body>
  <header>
    <h1 class="text-center">Pomodoro Clock</h1>
  </header>

  <section class="container">

    <div id="counter-main">
      <h1>Session Time</h1>
      <a href="#" class="btn btn-primary" id="plusCounterMain">-</a>
      <h2 id="timerMain">5</h2>
      <a href="#" class="btn btn-primary" id="minusCounterMain">+</a>
    </div>
    <div id="resetDiv">
      <a href="#" class="btn btn-primary" id="resetMain">Reset</a>
    </div>

    <div id="break-main">
      <h1>Session Time</h1>
      <a href="#" class="btn btn-primary" id="plusBreakMain">-</a>
      <h2 id="breakCount">5</h2>
      <a href="#" class="btn btn-primary" id="minusBreakMain">+</a>
    </div>
    <div id="startDiv">
      <button class="btn btn-primary" id="start">Start</button>          
    </div>
  </section>
  <!-- jQuery library -->
  <script type="text/javascript" src="jquery-3.2.0"></script>
</body>

这是我的 JavaScript(jQuery) 代码：

$(document).ready(function(){
  var timer_main = $("#timerMain");
  var break_count = $("#breakCount");

  var count = parseInt(timer_main.html());
  var break = parseInt(break_count.html());

  $("plusCounterMain").click(function(){
    count +=5;
    console.log(count.toString());
    timer_main.text(count.toString());
  });

  $("#start").click(function{
    var counter = setInterval(timer,1000);

    function timer() {
      count -=1;
      if (count === 0) {
        clearInterval(counter);
      }
      $("#timerMain").text(count.toString());
    }
  });
});

我不知道哪里错了。
我试图制作一个番茄钟，所以我使用了 setInterval 函数来每秒执行一次代码。

我哪里做错了？

Answer 1

ID 应以# 为前缀。主要问题是您已将变量名称命名为 break。这是 JS 中的关键字。我已经改变了。请检查以下代码。

   $(document).ready(function(){
var timer_main = $("#timerMain");
var break_count = $("#breakCount");


var count = parseInt(timer_main.html());
var breakCount = parseInt(break_count.html());

$("#plusCounterMain").click(function(){
    count +=5;
    console.log(count.toString());
    timer_main.text(count.toString());
});


$("#start").click(function(){
    var counter = setInterval(timer,1000);

    function timer() {
        count -=1;
        if (count === 0) {
            clearInterval(counter);
        }
        $("#timerMain").text(count.toString());
    }

}); });

Answer 2

你有一些语法错误 1. break 是一个保留字，2.你忘记了#start click事件函数中的（），3。 plusCounterMain id

中的#

  var timer_main = $("#timerMain");
  var break_count = $("#breakCount");


  var count = parseInt(timer_main.html());
  var breaked = parseInt(break_count.html());

  $("#plusCounterMain").click(function() {
    count += 5;
    console.log(count.toString());
    timer_main.text(count.toString());
  });


  $("#start").click(function (){
    var counter = setInterval(timer, 1000);

    function timer() {
      count -= 1;
      if (count === 0) {
        clearInterval(counter);
      }
      $("#timerMain").text(count.toString());
    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1 class="text-center">Pomodoro Clock</h1>
</header>

<section class="container">

  <div id="counter-main">
    <h1>Session Time</h1>
    <a href="#" class="btn btn-primary" id="plusCounterMain">-</a>
    <h2 id="timerMain">5</h2>
    <a href="#" class="btn btn-primary" id="minusCounterMain">+</a>
  </div>
  <div id="resetDiv"><a href="#" class="btn btn-primary" id="resetMain">Reset</a></div>

  <div id="break-main">
    <h1>Session Time</h1>
    <a href="#" class="btn btn-primary" id="plusBreakMain">-</a>
    <h2 id="breakCount">5</h2>
    <a href="#" class="btn btn-primary" id="minusBreakMain">+</a>
  </div>
  <div id="startDiv"><button class="btn btn-primary" id="start">Start</button>
  </div>
</section>
<!-- jQuery library -->

注意：如果您的实现有多个实例，您应该使用类

Answer 3

$(document).ready(function(){
var timer_main = $("#timerMain");
var break_count = $("#breakCount");


var count = parseInt(timer_main.html());
/*var break = parseInt(break_count.html()); */

$("#plusCounterMain").click(function(){
    count +=5;
    console.log(count.toString());
    timer_main.text(count.toString());
});

$("#start").click(function(){
    var counter = setInterval(timer,1000);

    function timer() {
        count -=1;
        if (count === 0) {
            clearInterval(counter);
        }
        $("#timerMain").text(count.toString());
    }
});

});

Answer 4

使用以下方法在控制台中检查您的点击事件

$(document).on('click','#plusCounterMain',function(){
       console.log('In plusCounterMain');
});

$(document).on('click','#start',function(){
       console.log('In start');
});

我的 jquery 点击不起作用

My jquery click isnt working

javascript

jquery

web-frontend