如何添加一個計數器來顯示一個 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.