在mouseClicked函数中增加一个数字
在mouseClicked函数中增加一个数字
提问于 2020-07-19 08:44:57
我有一个代码，当单击鼠标时使用mouseClicked = function(){}绘制一个对象，然后我需要一个数字来显示已经绘制了多少个对象。问题是这个数字不会增加。我该怎么做？
回答 4
Stack Overflow用户
发布于 2020-07-19 09:23:21
与声明和递增全局变量不同，您可以在按钮上将计数设置为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>
Stack Overflow用户
发布于 2020-07-19 09:09:09
下面是一个简单的示例，它将让您了解如何递增计数器
var res=document.getElementById("res")
var btn=document.getElementById("btn")
var count=1
btn.addEventListener("click",()=>{
res.textContent=count
count++
})<div id="res"></div>
<button id="btn">Draw</button>
Stack Overflow用户
发布于 2020-07-19 09:07:06
如果像标题所说的那样，在mouseClicked函数中定义了count变量，那么您就是在每个mouseClick中重新创建它。在这种情况下，您应该在函数外部将其定义为value =0，并在函数内部将1与该值相加。无论如何，正如评论所说，为了给出更好的答案，你有必要在你的问题中包含代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62975167
复制相关文章
相似问题
腾讯云开发者
