如何在瀏覽器中顯示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/