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

你有一些语法错误1. break是保留字，2。你忘记了#start点击事件功能中的（）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 2

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 3

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

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

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

Answer 4

$(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());
    }
});

}）;

我的jquery点击不起作用

4 个答案: