javascript - Javascript中的点击事件计数器 | Javascript中的点击事件计数器

我已经阅读了很多问题，并且大多数问题似乎都通向JQuery，但是我实际上是在尝试仅使用普通JS来使其工作。我试图使图片下方的屏幕编号每次单击都增加1。当我单击时，我实际上得到了NaN信息，现在出现了一个奇怪的“ [objectParagraphElement] 1”消息，因此我知道DOM受到了影响。有人可以看到我在做些愚蠢的事情吗？

谢谢

<!DOCTYPE html>
<html lang=en>
<head>
    <title>KittyKlikr</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--<p id="kitty"></p>-->
<span id="kitty1"><img src="kittyklikr.jpg" alt="kitty" height="50%" width="50%"></span>
<br>
<p id="counter">0</p>
<script>
document.addEventListener("click", addUp, false);
function addUp() {
    var x = document.getElementById("counter");
    document.getElementById("counter").innerHTML = x+1;
}
</script>
</body>
</html>

最佳答案

鉴于您有：

var x = document.getElementById("counter");

并且innerHTML属性返回一个字符串，您需要将值转换为数字，加1，然后写回元素：

x.innerHTML = parseInt(x.innerHTML) + 1;

或者，您可以使用unary + operator：

x.innerHTML = +x.innerHTML + 1;

但是parseInt可能更清晰。

编辑

顺便说一句，一种更干净的方法是将值存储为Number并将其写入元素，例如：

// Use an IIFE to hold count and reference to element in a closure
var addUp = (function() {
  var count = 0;

  return function () {
    var element = document.getElementById("counter");
    if (element) element.innerHTML = ++count;
  }
}());

// Attach as a listener
document.addEventListener("click", addUp, false);

请注意，由于使用了函数表达式，因此您必须等到表达式执行后才能将其分配为侦听器。

关于javascript - Javascript中的点击事件计数器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28378375/