クリックイベントが発生するたびに変数を追加するにはどうすればよいですか？

Question

JavaScriptの新機能です。ユーザーがボタンやリンクをクリックするたびに表示され、1ずつ増加する基本プログラムを作成します。たとえば、イベントがクリックによって発生した場合などです。カウンタには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に追加したイベントリスナーです。しかし、私は主に自分のコードのトップ部分について心配しています。イベントを発生させる要素をクリックするたびに、ゼロが表示されます。そこから1つ増えません。

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)はeへtrueが割り当てられている：event。

あなたは要素の.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>