Javascript条件点击事件运行多次

Question

我有一个 HTML 选择，旨在影响我的 Javascript 单击事件。虽然我的代码在技术上有效，但我不确定为什么我的点击事件在我更改选择框值的相应时间运行。

假设我将选项选择更改为 -- 之外的任何内容。如果我点击标记为 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">
	<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>

澄清一下，如果我更改了一次选项，那么单击任何donate 文本都会导致我的控制台添加一次文本Michael。如果我再次更改它，它会将其乘以 2，从而导致 Michael 出现 3 场。再次更改，它增加了 3，导致控制台记录 Michael 6 次。

这表明每当我点击捐赠文本时，我的函数就会运行很多次。我如何重新格式化为每次选项更改后我的函数仅运行一次？或者有什么基本的东西我完全错过了？

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>

注意，事件监听器只需附加一次。因此，请考虑一下代码实际上想要实现的目标是什么。