Javascriptの条件付きクリックイベントが複数回実行されています

Question

JavaScriptのクリックイベントに影響を及ぼすためのHTML選択があります。私のコードは技術的には機能しますが、なぜ私のクリックイベントが対応する時に実行されて、選択ボックスの値を変更するのかがわかりません。

私はオプション選択を--でないものに変更します。 donateというラベルの付いたテキストをクリックすると、コンソールログにMichaelのテキストが表示されます。ここで、オプションの値を ' t --'という別の値に切り替えて、donateを再度クリックすると、自分のクリックイベントが2回実行されます。このプロセスをもう一度繰り返すと、クリックイベントが3回実行されます。

私の例はちょっと無意味に見えますが、うまくいきません。

var changing = document.getElementById("changing"); 
 
var donate = document.getElementsByClassName("donate"); 
 
changing.addEventListener('change', function() { 
 
    if (this.value !== "--") { 
 
    for (i = 0; i < donate.length; i++) { 
 
     donate[i].addEventListener('click', function() { 
 
     console.log("Michael"); 
 
     }); 
 
    } 
 
    } 
 
});

<select id="changing"> 
 
\t <option value="--">--</option> 
 
\t <option value="vegetarian">Vegetarian</option> 
 
\t <option value="technical">Technical</option> 
 
\t <option value="shoes">Shoes</option> 
 
</select> 
 
<p class="donate">Donate</p> 
 
<p class="donate">Donate</p> 
 
<p class="donate">Donate</p>

明確にするために、私は一度オプションの変更を行う場合は、その後、任意のdonateテキストをクリックすると、テキストMichael 1時間を加え、私のコンソールにつながります。私がもう一度それを変更すると、これは2に乗算され、Michaelの3つの番組につながります。再度変更し、3を加えて、コンソールロギングの6倍につなげるMichael。

これは、donateテキストをクリックするたびに私の機能が何度も実行されていることを示しています。私の機能が各オプションの変更後に1回だけ実行される場所にどのように再フォーマットするのですか？または、私が完全に欠けている根本的なものがありますか？

Answer 1

これは達成しようとしているものに近いですか？

var changing = document.getElementById("changing"); 
var donate = document.getElementsByClassName("donate"); 
var flag = false; 

function log() { 
    console.log("Michael"); 
} 

changing.addEventListener('change', function() { 
    if (this.value !== "--" && !flag) { 
    flag = true; 
    for (i = 0; i < donate.length; i++) { 
     donate[i].addEventListener('click', log); 
    } 
    } 
    else if(this.value == "--") { 
    flag = false; 
    console.log("+++") 
    for (i = 0; i < donate.length; i++) { 
     donate[i].removeEventListener('click', log); 
    } 
    } 
}); 

。

<select id="changing"> 
    <option value="--">--</option> 
    <option value="vegetarian">Vegetarian</option> 
    <option value="technical">Technical</option> 
    <option value="shoes">Shoes</option> 
</select> 
<p class="donate">Donate</p> 
<p class="donate">Donate</p> 
<p class="donate">Donate</p> 

注意、イベントリスナーは一度だけ接続する必要があります。したがって、コードは、実際にであると考えてください。です。

Answer 2

選択値が==の場合に、changeリスナーがトリガーされるたびにaddEventListenerと呼び出すたびに、新しいclickリスナーをバインドしています。

選択値が==の場合は、Michaelを1回だけ印刷する場合は、すべてclickのリスナーを一度バインドし、その中の値を確認します。

for (let i = 0; i < donate.length; i++) { 
    donate[i].addEventListener("click", function() { 
    if (changing.value !== "--") { 
     console.log("Michael"); 
    } 
    }); 
}