Javascript中的单击事件计数器答案

【问题标题】：Click event counter in JavascriptJavascript中的单击事件计数器
【发布时间】：2015-04-07 08:08:40
【问题描述】：

我已经阅读了很多问题，大多数问题似乎都指向了 JQuery，但我实际上是在尝试仅使用 vanilla 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>

【问题讨论】：

标签： javascript image dom getelementbyid addeventlistener

【解决方案1】：

假设你有：

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

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

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

或者你可以使用unary + operator:

x.innerHTML = +x.innerHTML + 1;

但parseInt 可能更清楚。

编辑

顺便说一句，更简洁的方法是将值存储为数字并将其写入元素，例如：

// 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);

请注意，由于使用了函数表达式，因此在表达式执行之前，您不能将其指定为侦听器。

【讨论】：

【解决方案2】：

你需要document.getElementById("counter").innerHTML = Number(x.innerHTML) + 1;，而不是document.getElementById("counter").innerHTML = x + 1;。

您正在向元素添加 1，而不是元素的值。

【讨论】：

检查我的答案，@RobG。
似乎上面的方法都没有返回 NaN 以外的任何东西。现在，我在 Chromebook 上使用 Cloud9，这是通过一个很小的预览窗口进行的，所以不确定代码是否真的是问题所在。