Question

我正在为个人项目创建一个基本网站。我在代码中也有一个div元素。当用户单击该特定的div元素时，我希望该站点在div元素旁边显示一个计数器，以计算其被单击的次数。我不需要在其他任何地方保存它被单击了多少次。 JS有可能吗？我该怎么办？

我根本不了解Javascript，所以我不知道要尝试什么。

我想在元素旁边有一个基本计数器，以计算已被计数的次数。同样，无需保存任何服务器。另外，我也不担心用户可以单击div元素并添加另一个数字的次数。

Answer 1

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

let clicks = 0;

然后您需要使用

在DOM中找到div

document.getElementById() // or
document.getElemenyByClass() // or similar

找到div的例子是

my_div = document.getElementById("click_div");

然后您需要向div中添加Event listener

类似这样的东西

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代码块中，我们需要引用特殊变量，因此我们创建了另一个变量

myDiv = document.getElementById("special")

现在

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

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

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

现在，我们每次点击都会增加计数器或变量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

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

Answer 3

您是说这样的基本计数器吗？您还可以将eventlistener添加到普通div（不必是button元素）：

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>

Answer 4

首先，您需要提供javascript可定位的divs标签。我们可以使用id，因为它们是唯一的。例如：

<div id="clicker"></div>

javascript通过id定位document.getElementById("clicker")的方式

接下来，我们需要知道何时单击div。为此，我们在跟踪“点击”的div上附加了“监听器”：

document.getElementById("clicker").addEventListener("click", ...

现在，当检测到单击时，将运行附加到该单击的功能（即代码）。下面说明该函数中的代码。

我们使用.textContent来检索div中的文本内容，并将其分配给变量count：

let count = document.getElementById("counter").textContent;

由于count是一个字符串，因此我们首先使用parseInt函数将其转换为数字。并非所有时间都在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>

Answer 5

这是一种非常适合初学者的方法：

HTML和CSS：
HTML包含两个div元素（每个元素都有自己的id属性，因此我们的JavaScript代码可以轻松找到它们。）CSS可以改善HTML的外观。

JavaScript：
创建两个变量，每个变量存储对div元素之一的引用。创建了一个事件侦听器，以在页面上发生click事件时发出通知，并通过调用count函数进行响应。

创建count函数。它的大多数语句都包装在if块中，因此仅在满足条件时才执行代码。（触发条件是click事件的目标是其id属性值为“ clickableDiv”的div元素。）

现在，只要单击一次，如果满足条件，其余代码就会运行：

创建了两个变量：oldCount和newCount。
oldCount被分配了一个值。（该值是调用的输出内置的parseInt()函数，使用 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>

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

5 个答案: