如何添加计数器以显示div元素被单击了多少次？

Question

我正在为个人项目创建一个基本网站。我在代码中也有一个div元素。当用户单击该特定的div元素时，我希望该站点在div元素旁边显示一个计数器，以计算其被单击的次数。我不需要在其他任何地方保存它被点击了多少次。JS有可能吗？我该怎么办？我根本不了解Javascript，所以我不知道要尝试什么。我想在元素旁边有一个基本的计数器，以计算它已经被计数了多少次。同样，服务器无需保存任何内容。另外，我也不担心用户可以单击div元素并添加另一个数字的次数。

Answer 1

首先，您需要一个计数器来存储点击数

let clicks = 0;

然后，您需要使用DOM在DOM中找到您的div

document.getElementById() // or

document.getElemenyByClass() // or similar

查找div的一个示例是

my_div = document.getElementById("click_div");

然后，您需要向div添加一个事件侦听器

像这样

my_div.addEventListener("click", function(){

  // add code here that increases the /clicks/ variable

});

Answer 2

欢迎使用stackoverflow @Gabrielle！我了解您是JavaScript新手，还无法找到有意义的答案来尝试该项目。

让我们先从基础开始，在JavaScript中，我们需要存储clicks的值，因此我们声明一个变量

i = 0

现在我们要给该特定的div一个ID，所以可以说 <div id="special"> Some Content...</div>

在我们的JavaScript代码块中，我们需要引用special，因此我们创建了另一个变量，

myDiv = document.getElementById("special")

myDiv现在已引用到您要跟踪的特殊div。接下来，我们创建点击事件，以跟踪对该元素的点击。

myDiv.addEventListener("click",function(){ Clicked! Do something... })

addEventListener 告诉DOM，它只想监听发生在该元素上的点击，如果是，则触发function标签内部的指令。

现在我们增加计数器或i每次点击时增加变量，因此我们使用 i += 1

这样，每次发生的点击都会i为其添加一个点击。

最后，我们必须在页面上的另一个特殊ID上显示该数字，我将让您“自从简单”这一部分来找出来，但我将在下面引用。

// Variables

i = 0;

myDiv = document.getElementById("special");

// Event Listeners

myDiv.addEventListener("click", function() {

  i += 1;

  console.log(i);

});

<div id="special">Click Me!</div>

在页面内显示数字的一些帮助，请转到JS Inner HTML

希望这对您有所帮助！如果这样做，请不要忘记竖起大拇指！