You can set the variable to the number of clicks and increment it each time the timer works. To check if the timer is working, you can set another boolean variable true while the timer is running and false when it is done so that you can check if the timer is working.
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 change 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 placing it in a popup).
See a working example at JSfiddle.net.
EDIT
In your example:
HTML
Remove the onclick attributes and change id="clicks" to class="clicks" in 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 a new working example designed to work with your code.