Question

这是我的任务对象：

设计一个网页，其中包含20个朋友面孔。有一个“开始”按钮，开始一个20秒的计时器，然后计算一个玩家可以在那个时间点击的面数。

一旦20秒结束，请向用户提供他们点击了多少面孔的提醒。您无法计算多次单击的同一面。

我已经想出了如何创建增量计数器功能。此功能允许玩家单击图像，每次单击图像时计数器将增加1。

这是我创建的功能。

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

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

Answer 1

将此添加到incrementCounter函数。

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

注意：您的incrementCounter函数似乎没有考虑被点击的重复面部，因为这是您的任务的一部分我想我会指出它。

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/

如何向浏览器显示onclick事件？

2 个答案: