如何添加一个计数器来显示一个 div 元素被点击了多少次？
[英]How do I add a counter to show how many times a div element has been clicked?
问题描述
我正在为个人项目创建一个基本网站。 我在代码中也有一个 div 元素。 当用户点击这个特定的 div 元素时，我希望网站在 div 元素旁边显示一个计数器来计算它被点击的次数。 我不需要在其他任何地方保存它被点击了多少次。 JS可以做到这一点吗？我该怎么做？
我根本不知道多少 Javascript，所以我不知道到底要尝试什么。
我想在元素旁边有一个基本计数器来计算它被计算了多少次。 同样，无需将任何内容保存为服务器。 另外，我不担心用户可以单击 div 元素并添加另一个数字的次数。
6 个解决方案
解决方案1
2 2019-05-12 01:25:55
首先，您需要一个计数器来存储点击次数
let clicks = 0;
然后你需要在 DOM 中找到你的 div 使用
document.getElementById() // or
document.getElemenyByClass() // or similar
找到你的 div 的一个例子是
my_div = document.getElementById("click_div");
然后你需要在 div 中添加一个Event 监听器
像这样的东西
my_div.addEventListener("click", function(){
// add code here that increases the /clicks/ variable
});
解决方案2
1 2019-05-12 01:23:33
欢迎来到stackoverflow @Gabrielle。 我了解您是 JavaScript 的新手，并且无法找到有意义的答案来尝试这个项目。
让我们先开始basic，在JavaScript中，我们需要存储clicks的值，所以我们声明一个变量
i = 0
现在我们想给那个特定的 div 一个 ID，让我们说<div id="special"> Some Content...</div>
在我们的 JavaScript 代码块中，我们需要引用特殊的，所以我们创建另一个变量，
myDiv = document.getElementById("special")
myDiv现在引用了您要跟踪的特殊 div。 接下来，我们创建 on click 事件来跟踪对该元素的点击。
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>
一些帮助显示页面内的数字，go 到JS Inner HTML
希望这有帮助！ 如果有，别忘了点赞！
解决方案3
1 2022-08-15 07:22:07
我创建了一个 div 并用颜色填充它以使其易于区分。 单击 div 将产生一个弹出窗口，其中每次单击计数都会增加。
<!DOCTYPE html>
<html>
<style>
div {
width: 500px;
height: 100px;
border: 1px solid grey;
background-color: blue;
}
</style>
<head> </head>
<body>
<script>
let count = 0;
function counter() {
count = count + 1;
alert(count);
}
</script>
<div onclick="counter()"> </div>
</body>
</html>
解决方案4
0 2019-05-12 01:21:09
你的意思是像这样的基本计数器吗？ 您还可以将 eventlistener 添加到普通 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>
解决方案5
0 2019-05-12 01:25:13
首先，您需要提供 javascript 可以定位的 div 标签。 我们可以使用id因为它们是唯一的。 例如：
<div id="clicker"></div>
javascript 目标id的方式是通过document.getElementById("clicker")
接下来，我们需要知道 div 何时被点击。 我们通过将“监听器”附加到跟踪“点击”的 div 来做到这一点：
document.getElementById("clicker").addEventListener("click", ...
现在，当检测到点击时，附加到点击的 function（即代码）将运行。 下面解释function中的代码。
我们使用.textContent检索 div 中的文本内容，并将其分配给变量count ：
let count = document.getElementById("counter").textContent;
由于 count 是一个字符串，我们首先使用parseInt function 将其转换为数字。 javascript 中并非所有时间都需要，因为它会自动转换，但无论如何都是良好的做法。
parseInt(count);
现在我们知道它是一个数字，我们可以给它加一个。 这是一个简短的形式：
counter++; // same as saying counter = counter + 1;
还记得我们如何使用.textContent从 div 获取文本内容吗？ 我们还可以使用相同的.textContent设置文本内容，如下所示：
document.getElementById("counter").textContent = count; //set to new value
把它放在一起：
// target the "clicker" div and adds a listener to detect clicks document.getElementById("clicker").addEventListener("click", function (event) { // for each click, it will run this function // get current value from "counter" div let count = document.getElementById("counter").textContent; // turn string to integer parseInt(count); // add one count++; // set the new value back to "counter" div document.getElementById("counter").textContent = count; });
div { display: inline-block; padding: 5px; border: solid 1px gray; }
<div id="clicker">click here</div><div id="counter">0</div>
解决方案6
0 2019-05-12 02:00:02
这是一种非常适合初学者的方法：
HTML 和 CSS：
The HTML contains two div elements (each with its own id attribute so our JavaScript code can easily find them.) And the CSS improves the appearance of the HTML.
JavaScript：
创建了两个变量，每个变量都存储对其中一个div元素的引用。 创建了一个事件侦听器，用于在页面上发生click事件时通知并通过调用count function 进行响应。
创建count function。 它的大部分语句都包装在if块中，因此代码只有在满足条件时才会执行。 （触发条件是click事件的目标是id属性值为“ clickableDiv ”的div元素。）
现在每当点击发生时，如果满足条件，代码的 rest 就会运行：
- 创建了两个变量：
oldCount和newCount。 -
oldCount被赋值。 （该值是调用内置parseInt()function 的 output，使用counterDiv元素内的任何内容作为输入。 -
newCount被赋值。 （该值比oldCount中的值大一。） -
counterDiv元素中的任何内容都将替换为存储在newCount中的值。
// Defines references to elements (using `const` because the values // should never change) const clickableDiv = document.getElementById("clickableDiv"); const counterDiv = document.getElementById("counterDiv"); // Defines a listener that will call our function whenever a click happens document.addEventListener("click", count); // Defines the `count` function function count(event){ // Limits which click events will change our counter if (event.target == clickableDiv){ // Declares variables to hold numbers (using `let` in case we // might want to change the values later) let oldCount; let newCount; // Assumes the HTML content of counterDiv looks like a number, // gets that number, and stores it in oldCount oldCount = parseInt(counterDiv.innerHTML); // Adds 1 to the number stored in oldCount, and stores the result // in newCount newCount = oldCount + 1; // Makes a string from the number (not strictly necessary) // and replaces the HTML content of counterDiv with that string counterDiv.innerHTML = newCount.toString(); } }
div { float: left; width: 25%; height: 2em; padding: 1em; text-align: center; font-weight: bold; border: 1px solid grey; }
<div id=clickableDiv>Click me</div> <div id="counterDiv">0</div>
我如何获得一个按钮来执行多项任务，具体取决于单击了多少次？ （JavaScript）
[英]How can i get one button to do multiple tasks depending on how many times it has been clicked? (Javascript)
如何获得一个按钮被单击的次数的变量，将其在线存储然后在以后访问？
[英]How do I get a variable of the number of times a button has been clicked, store it online and then access it later?
如何根据在 React 中单击哪个按钮来切换 div class？
[英]How do I toggle div class depending on which button has been clicked in React?
jQuery根据单击按钮的次数更改元素
[英]jQuery changing elements depending on how many times the button has been clicked
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.