单击Javascript中的事件计数器
Click event counter in 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;
或者您可以使用一元+运算符:
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);
请注意,由于使用了函数表达式,因此在表达式执行之后才能将其指定为侦听器。
您需要document.getElementById("counter").innerHTML = Number(x.innerHTML) + 1;
,而不是document.getElementById("counter").innerHTML = x + 1;
。
您正在向元素添加1,而不是元素的值。
相关文章:
- 分派点击事件并保留击键修饰符
- 模糊事件的Javascript测试
- keyup事件处理程序更改焦点不适用于快速键入
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- JQuery使计数器每次更改时都会增加
- 如何使Javascript动态html表及其上的事件
- 使用类从一个标记中双击事件
- 如何在未直接触发的情况下停止事件
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 对iPad上的点击事件反应缓慢
- 事件和状态
- 如何使用jQuery跟踪单个dom元素上的点击事件,并相应地更新其点击计数器
- 单击Javascript中的事件计数器
- 键盘事件、字符计数器和textLength道具困境
- Backbone.js once()事件方法:计数器增量示例
- 点击计数器,每次点击不同的事件
- 使用计数器索引来设置.hover()和.mouseout()事件
- 将Onblur和onfocus事件放入已有的计数器脚本中
- 如何重载页面时使用jquery.计数器触发完成.多个实例的倒计时事件
- 无法让第二个事件监听器为MVC计数器应用工作