javascript - Javascript - 如何添加计数器以显示一个div元素已被点击的次数?

我正在为个人项目创建一个基本网站,我在代码中也有一个div元素,用户单击这个特定的div元素时,我希望该站点在div元素旁边显示一个计数器来计算它被点击了多少次,我不需要在哪儿保存点击了多少次,这能基于JS做到吗?

我完全不了解Javascript,所以,我还不知道到底要尝试什么。

我想在元素旁边有一个基本计数器来计算它被计数了多少次,同样,不需要保存到服务器

时间:

首先你需要一个计数器来存储点击次数


let clicks = 0;



然后你需要在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


});



让我们先从基本的JavaScript开始,我们需要存储点击的值,所以,我们声明一个变量,

i = 0

现在我们想给这个特定的div一个ID,所以说,<div id="special"> Some Content...</div>

在我们的JavaScript代码块中,我们需要引用特殊,所以,我们创建另一个变量,

myDiv = document.getElementById("special")

myDiv现在被引用到你想要跟踪的特殊div ,接下来我们创建on点击事件点击那个元素。

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

addEventListener告诉DOM它只想监听出现在该元素上的点击,如果是,触发函数标记的指令。

现在我们增加计数器或者每次单击发生变量i所以,我们使用i += 1

这样每次点击时,i就会自增1。

最后我们必须在页面上显示该号码到另一个特殊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 :


$(document).ready(function() {


 let counter = 0


 document.getElementById("button").addEventListener("click", function(){


 counter++


 document.querySelector(".counter").innerHTML = counter


 });


 });



html :


<button id="button">Click!</button>


<div class="counter">0</div>



...