My jquery click isnt working

Question

I am making a website and I included jQuery.
When I use click events, it isn't working.

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>

Here is my JavaScript(jQuery) code:

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

I have no idea where I went wrong.
I was trying to make a pomodoro clock, so I used the setInterval function to execute code every second.

Where have I went wrong?

Answer 1

You have some syntax errors 1. break is a reserved word,2. you forgot the () in the #start click event function,3. the # in the 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 -->

Note: you should use classes if your implementation has multiple instances

Answer 2

Id should be prefix with #. The main issue is you have given variable name as break. This is keyword in JS. I have changed it. Please check below code.

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

Check your click events in console with following approach

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

});

My jquery click isnt working

Question

4 answers

solution1
1 ACCPTED 2017-03-29 05:33:36

solution2
0 2017-03-29 05:31:39

solution3
0 2017-03-29 06:06:44

solution4
-1 2017-03-29 05:57:08

My jquery click isnt working

Question

4 answers

solution1 1 ACCPTED 2017-03-29 05:33:36

solution2 0 2017-03-29 05:31:39

solution3 0 2017-03-29 06:06:44

solution4 -1 2017-03-29 05:57:08

solution1
1 ACCPTED 2017-03-29 05:33:36

solution2
0 2017-03-29 05:31:39

solution3
0 2017-03-29 06:06:44

solution4
-1 2017-03-29 05:57:08