JavaScriptにおける匿名関数の解除

ここで、私たちの段落に匿名関数がバインドされているとします：

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

この段落をクリックした後、その段落からこの関数を解除したいとします。しかし、問題が待ち受けています：関数には名前がないため、その名前で参照して解除することができません。

この問題を解決するには、関数に名前を付け、名前付き関数式にする必要があります。やってみましょう：

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function func() { // 関数に名前を付けました
		console.log(this.textContent);
	});
}

これで、この関数はその内部から自身を解除できるようになります：

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		console.log(this.textContent);
		this.removeEventListener('click', func); // 関数を解除します
	});
}

各項目に数字が書かれたリスト ul があります。どの li をクリックしても、その数字が1増えるようにしてください。

前の課題を修正して、各 li が最初のクリック時のみその値を増加させるようにしてください。

前の課題をさらに修正して、各 li の値が 10 未満の場合のみその値を増加させるようにしてください。