How do I display an onclick event to the browser?

Question

This is the object of my assignment:

Design a page that has a grid of 20 of your friends faces. Have a “Start” button that kicks off a 20 second timer and then count the number of faces a player can click in that time.

Once the 20 seconds is up, give the user an alert with how many faces they clicked. You cannot count the same face being clicked multiple times.

---

I have figured out how to create an increment counter function. This function allows the player to click an image and the counter will increase by one every time an image is clicked.

This the function I created.

var counter=0;
 function incrementCounter() {
  counter+=1;
  console.log(counter);
}

Is there something I can add to the function that will allow the counter to be displayed in a box, every time an image is clicked? The incrementation can be viewed in the console(using Chrome Dev Tools), however I don't know how to make it appear on the browser.

Answer 1

Add this to your incrementCounter function.

document.getElementById("counter-div").innerHTML = counter;

Note: Your incrementCounter function doesn't seem to account for a duplicate face being clicked, as that is part of your assignment I figured I'd point it out.

Answer 2

<button onClick="incrementCounter()">Click</button>
<div id="display"><div>

var counter=0;
function incrementCounter() {
  counter+=1;
  document.getElementById("display").innerHTML = counter;
}

here's a working fiddle:

http://jsfiddle.net/va12d766/