如何在浏览器中显示onclick事件？

Question

这是我的任务对象：

设计一个包含20个朋友面的网格的页面。 有一个“开始”按钮，它会启动20秒钟的计时器，然后计算玩家在该时间内可以单击的面孔数量。

20秒结束后，向用户发出警告，告知他们单击了多少张面孔。 您不能计算同一张脸被多次单击。

---

我已经弄清楚了如何创建一个增量计数器功能。 此功能允许播放器单击图像，并且每次单击图像时计数器都会增加一。

这是我创建的功能。

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

我是否可以添加一些功能，以使每次单击图像时都可以将计数器显示在框中？ 增量可以在控制台中查看（使用Chrome开发工具），但是我不知道如何使它出现在浏览器中。

Answer 1

将此添加到您的crementCounter函数。

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

注意：您的crementCounter函数似乎并不说明单击了重复的面孔，因为这是您分配的一部分，我想指出了这一点。

Answer 2

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

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

这是一个工作的小提琴：

http://jsfiddle.net/va12d766/