Question

我是Javascript的新手，我希望构建一个基本程序，只要用户点击按钮或链接，该程序就会显示并递增。例如，通过单击触发事件。计数器应显示1.然后，当用户点击我放置事件监听器的任何地方时;柜台应显示2.等。

function addByOne(e) {
 var i = 0;
 if (e = true) {
   elMsg.innerHTML = ++i;
 }
}

var elMsg = document.getElementById('count');
var el = document.getElementById('selection');
el.addEventListener('click', function (e) {
  addByOne(e);
}, false);

我的代码的底部是我添加到HTML中的事件监听器。但我最担心的是我的代码的顶部。每当我点击一个元素使事件触发时它就会显示零。它不会从那里增加一个。

Answer 1

如果您在i = 0方法中声明addByOne，则每次点击都会将其初始化为0。它应该在函数之外声明。此外，e = true将覆盖传递给事件处理程序的事件对象。

function addByOne(e) {
    elMsg.innerHTML = ++i;
}

var i = 0;
var elMsg = document.getElementById('count');
var el = document.getElementById('selection');
el.addEventListener('click', function (e) {
    addByOne(e);
}, false);

Answer 2

i在每个事件处理程序调用时设置为0，e为事件，if(e = true)将true分配给e：{{ 1}}。

您可以使用event在元素HTMLElement.dataset上存储数据，将字符串转换为数字，Number()添加到数字，重置+ 1属性的值元素

.dataset

function addByOne() {
   if (elMsg.dataset.i === undefined)  {
     elMsg.dataset.i = 1
   } else {
     elMsg.dataset.i = Number(elMsg.dataset.i) + 1
   }
   elMsg.innerHTML = elMsg.dataset.i;
}

var elMsg = document.getElementById('count');
var el = document.getElementById('selection');
el.addEventListener('click', function (e) {
  addByOne();
}, false);

每当点击事件触发时，如何将变量添加一个

2 个答案: