时间戳

首页 > 解决方案 > 在 mouseClicked 函数内增加一个数字

javascript - 在 mouseClicked 函数内增加一个数字

问题描述

我有一个代码，我在单击鼠标时绘制一个对象mouseClicked = function(){}，然后我需要一个数字来显示已绘制了多少个对象。问题是数量不会增加。我该怎么办？

标签： javascript

解决方案

而不是声明和增加一个全局变量 - 您可以将计数设置为按钮上的 HTML 5 数据属性，然后单击按钮，获取数据属性值，增加它并更新显示和按钮上的新计数。

请注意，数据属性始终是字符串 - 因此需要 parseInt() 方法，但如果我是一个纯粹主义者 - 我也会将基数放入，但默认为 10 - 所以在这种情况下不需要。

尽可能避免使用全局变量总是更好，数据属性提供了一种非常方便的存储本地数据的方式。

感谢@Sven.hig 提供解决方案的骨架代码 - 然后我将其修改为我的方法。

var res=document.getElementById("res")
var btn=document.getElementById("btn")

btn.addEventListener("click",()=>{
  const newCount = parseInt(btn.getAttribute('data-count'))+1;
  res.textContent = newCount;
  btn.setAttribute('data-count', newCount)
})
<div id="res"></div>

<button id="btn" data-count="0">Draw</button>

推荐阅读