点击Javascript中的事件计数器

时间:2015-02-07 03:58:08

标签: javascript image dom getelementbyid addeventlistener

我已经阅读了很多问题,而且大多数似乎都会引导到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>

2 个答案:

答案 0 :(得分:1)

鉴于你有:

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

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

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

或者您可以使用unary + operator

x.innerHTML = +x.innerHTML + 1;

parseInt可能更清楚。

修改

BTW,更清洁的方法是将值存储为数字并将其写入元素,例如:

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

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

答案 1 :(得分:0)

您需要document.getElementById("counter").innerHTML = Number(x.innerHTML) + 1;,而不是document.getElementById("counter").innerHTML = x + 1;

您要为元素添加1,而不是元素的值。