listener for h3 tags do not work

Question

I have a pomodoro clock and I'm having problems with listeners for minBreak and plusBreak respectively. the plusWork minWork jquery listener work just fine, but for some reason the listeners for minBreak and plusBreak do not work. Could someone tell me why? here's the code (don't mind the design too much.. is not finished)

 $(document).ready(function() { //variables var workTime = 2; //working time var breakTime = 10; //break time var seconds = 00; var minutes = workTime; //setting clock = to workTime var clockDisplay = document.getElementById("display"); var counterId = 0; var state = "on"; //start clock whenc button clicked $("#start").click(function() { console.log("started!"); setInterval(countDown, 1000); $(this).hide(); //hide start button $("#stop").show(); //show stop button }); //stop clock when stop clicked $("#stop").click(function() { console.log("stopped!"); state = "off"; minutes = workTime; seconds = 0; clockDisplay.innerHTML = workTime + ":00"; $(this).hide(); //hiding stop $("#start").show(); //showing start }); //add work time $('.plusWork').click(function() { workTime++; $('.work').text(workTime); console.log(workTime); }); //substract work time $('.minWork').click(function() { workTime--; $('.work').text(workTime); console.log(workTime); }); //add break time $('.plusBreak').click(function() { breakTime++; $('.break').text(breakTime); console.log(breakTime); }); //substract break time $('.minBreak').click(function() { breakTime--; $('.break').text(breakTime); console.log(breakTime); }); //countdown function function countDown() { //if workTime = 0 reset counter and stop if (minutes == 0 || state == 'off') { clearTimeout(counterId); return; } //when seconds < 0 substract a minute else if (seconds < 0) { minutes--; seconds = 59; clockDisplay.innerHTML = minutes + ":" + seconds; } else { //if second single digit add 0 if (seconds < 10) seconds = "0" + seconds; clockDisplay.innerHTML = minutes + ":" + seconds; seconds--; } } }); 

 body { background-color: #22313f; ; } .title { margin: auto; text-align: center; font-size: 30px; } .container { text-align: center; } h2 { font-size: 50px; margin: 0 0 0 0; } .clockContainer { position: relative; text-align: center; } #display {} /* .timer { margin: 0 50px; margin-top: 70px; text-align: center; border: solid black 1px; font-size: 44px; width: 500px; height: 200px; display: inline-block; } */ .controlContainer { position: absolute; text-align: center; width: 100px; display: inline-block; } .control { width: 100px; height: 100px; border-radius: 100px; border: solid black 1px; text-align: center; margin-bottom: 20px; } .button { margin-top: 30px; } .hide { display: none; } .time { margin-top: 5px; margin-bottom: 5px; font-size: 20px; } .ticker { display: inline-block; font-size: 30px; margin-top: 0px; } .minus { margin-right: 10px; } .plus { margin-left: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <!-- header title --> <div class="title primary-text"> <h1>Pomodoro Clock</h1> </div> <!-- clock container --> <div class="clockContainer"> <h2>Session</h2> <!-- timer / clock --> <div class="timer"> <h1 id="display">30:00</h1> </div> <!-- this section for controlling clock --> <div class="controlContainer"> <div class="control"> <div id="start" class="button title">Start</div> <div id="stop" class="button hide title">Stop</div> </div> <div class="control"> <h3 class="time work">30</h3> <h3 class="title">Work</h3> <h3 class="minWork ticker minus">-</h3> <h3 class="plusWork ticker plus">+</h3> </div> <div class="control"> <h3 class="time break">10</h3> <h3 class="title">Break</h3> <h3 class="minBrake ticker minus">-</h3> <h3 class="plusBrake ticker plus">+</h3> </div> </div> </div> </div> 

Answer 1

You have typo in h3 class :

<h3 class="minBrake ticker minus">-</h3>
<h3 class="plusBrake ticker plus">+</h3>

Should be:

<h3 class="minBreak ticker minus">-</h3>
<h3 class="plusBreak ticker plus">+</h3>