每次點擊事件觸發時，如何添加一個變量

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

如果您在addByOne方法中聲明i = 0，則在每次單擊時它將被初始化爲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：event。

您可以使用HTMLElement.dataset在元素數據存儲，​​到字符串轉換爲數字，+ 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);

<div id="count">count</div> 
 
<div id="selection">click selection</div>