CODEWITHSUNDEEP
javascriptjqueryhtml
Padraighals
Padraighals

Reputation: 11

How to get a working countdown timer with a button that adds +1 to a counter after every click

I am setting up a project for class which I need to use jquery. I have settled on a project whereby you would click the button, the counter would increase by one and a timer would start. This would act like a game to see how fast you can click in 10 seconds.

$("#button").mousedown(function () {
score = score + 1;
startTimer();
});

function startTimer() {
if (stop === 0) {
    stop = stop + 1;
    var counter = 0;
    var interval = setInterval(function () {
        counter++;
        display = 60 - counter;
        $("#button").html("Click! (" + display + " secs)");
        if (counter == 60) {
            alert("Times up!");
            clearInterval(interval);
            stop = 0;
            endscore = score;
            score = 0;
        }
    }, 1000);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clicks">
   <p><span>0</span></p>
</div>
<div class="boxtext">
   <p>Time Remaining: <span>10</span> Seconds </p>
</div>
<div class="but">
   <button type="button" name="button">Click</button>
</div>

I expected the timer to start and the counter to increase by one but nothing happens at all.

Upvotes: 0

Views: 181

Answers (5)

Emad Dehnavi
Emad Dehnavi

Reputation: 3441

You need to:

Add an id to your button:

<button id="button" type="button" name="button">Click</button>

Also you need to define the score & stop variables globally outside the function:

    var score = 0;
    var stop =  0;

Upvotes: 2

The Guy
The Guy

Reputation: 421

<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function(){

var score=0;
var stop=0;
var counter = 0;
var endscore=0;
$("button").mousedown(function () {

score = score + 1;
$("#score").text(score);
startTimer();
});

function startTimer() {
if (stop === 0) {
stop = stop + 1;
var interval = setInterval(function () {
    counter++;
    display = 60 - counter;
   // $("button").html("Click! (" + display + " secs)");
    if (counter == 60) {
        alert("Times up!");
        clearInterval(interval);
        stop = 0;
        endscore = score;
        score = 0;
    }
    $('#timeRemaining').text(display);
}, 1000);
}
};
});
</script>
</head>
<body>
<div class="clicks">
<p><span id="score">0</span></p>
</div>
<div class="boxtext">
<p>Time Remaining: <span id="timeRemaining">60</span> Seconds </p>
</div>
<div class="but">
<button type="button" name="button">Click</button>
</div>
</body>
</html>

Upvotes: 1

Marco
Marco

Reputation: 2892

You forgot to initialize some variables and give some ids.

var score = 0
var stop = 0

$("#button").click(function () {
score = score + 1;
startTimer();
});

function startTimer() {
console.log('start timer')
if (stop === 0) {
    stop = stop + 1;
    var counter = 0;
    var interval = setInterval(function () {
    console.log('#interval')
        counter++;
        display = 60 - counter;
        $("#button").html("Click! (" + display + " secs)");
        if (counter == 60) {
            alert("Times up!");
            clearInterval(interval);
            stop = 0;
            endscore = score;
            score = 0;
        }
        
        $('#counter').html(counter)
    }, 1000);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clicks">
        <p><span id="counter">0</span></p>
      </div>
      <div class="boxtext">
        <p>Time Remaining: <span>10</span> Seconds </p>
      </div>
    </div>
    <div class="but">
      <button type="button" id="button">Click</button>
    </div>

Upvotes: 0

user11339835
user11339835

Reputation:

From your html you didn't have id="button" so use name selector or assign id to the button.

Like below.

$("input[name='button']").mousedown(function() {
  score = score + 1;
  startTimer();
});

Upvotes: 0

Ele
Ele

Reputation: 33726

You're using as selector an ID, however your button element doesn't have that ID. You can do the following:

  • Add the id to that button.
  • Or, you can change the selector as:
    $(".but").mousedown(function() { // or $('button[name="button"]').mousedown(function() {...});
      score = score + 1;
      startTimer();
    });

Upvotes: 0

Related Questions