How to create timer in javascript and count the clicks in specified time?

Question

I want to create timer in JavaScript,I will setup 10 secs and have user to click on images and display the counts when time stopped.

How can i achieve this task ?

index.html

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <img src="https://images.omkt.co/Files/402/15EAC0/19F78/8c2112737cfe4cd88779712a4906ef6d/0/hero_forte_2014--kia-1920x.png" height="150px" width="150px" id="clicks" onClick="clickMe()">
        </div>
        <div class="col-md-2">
            <img src="https://images.omkt.co/Files/402/15EAC0/19F78/8c2112737cfe4cd88779712a4906ef6d/0/hero_forte_2014--kia-1920x.png" height="150px" width="150px" id="clicks" onClick="clickMe()">
        </div>
        <div class="col-md-2">
            <img src="https://images.omkt.co/Files/402/15EAC0/19F78/8c2112737cfe4cd88779712a4906ef6d/0/hero_forte_2014--kia-1920x.png" height="150px" width="150px" id="clicks" onClick="clickMe()">
        </div>
    </div>

<div>
    <p id="clicks">0</p>
</div>

index.js

var clicks = 0;
function clickMe() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
};

var digit=-1;
    var min=0;
    var time;
    var timer_is_on=0;

    function timer(){
            digit++;

            if(digit>59){
                min++;
                document.getElementById("mins").innerHTML=min;
                digit=0;
            }
            // Put a "0" at the start of seconds
            if (digit <= 9)
                digit = '0' + digit;
                document.getElementById("secs").innerHTML=digit;
    }

Answer 1

You can set a variable to the number of clicks, and increment it every time if the timer is running. To check if the timer is running, you can set another boolean variable to be true while the timer is running and false when it is done, so that you can check whether or not the timer is running.

HTML

<img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" id="img" />

<button id="button">Start Timer</button>

JS

var img = document.getElementById("img");
var button = document.getElementById("button");

var timer = false;
var count = 0;
var t;

button.addEventListener("click", function() {
    timer = true;
    count = 0;
    t = setTimeout(function() {
        alert("Clicks on img: " + count);
    }, 10000);
});

img.addEventListener("click", function() {
    if(timer) {
        count++;
    }
});

You can easily modify this so that you can click on any of your images, and you can change what you want to do with the resulting count (instead of just putting it in a popup).

See working example on JSfiddle.net.

---

EDIT

For your example:

HTML

Remove the onclick attributes and change the id="clicks" to class="clicks" in your existing HTML.

JS

var img = document.getElementsByClassName("clicks");
var button = document.getElementById("button");

var timer = false;
var count = 0;
var clicked = [];
var t;

button.addEventListener("click", function() {
    timer = true;
    count = 0;
    clicked = [];
    t = setTimeout(function() {
        document.getElementById("clicks").innerHTML = count;
        timer = false;
    }, 10000);
});

for(var i = 0; i < img.length; i++) {
    img[i].id = i;
    img[i].addEventListener("click", function() {
        var index = this.id;
        if(timer && (clicked[index] == undefined)) {
            count++;
            clicked[index] = true;
        }
    });
}

See new working example designed to work with your code.