Javascript条件点击事件多次运行

Question

I have an HTML select that is meant to influence my Javascript click event. While my code technically works, I am unsure why my click event runs in the corresponding times that I change my select box value.

Say I change the option select to anything that isn't -- . If I then click on the text labeled donate then on my console log there is a text Michael . Now, if I switch the option value to another value that isn' t -- , and click on donate again, then my console runs my click event 2 times. And if I repeat this process again my click event runs 3 times.

My example is going to seem a bit nonsensical, but hopefully the point is clear.

 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> 

To clarify, if I do an option change once, then clicking on any donate text leads to my console adding the text Michael one time. If I change it again, it multiplies this into 2, leading to 3 shows of Michael . Change again, and it adds 3, leading to 6 times console logging Michael .

This indicates to me that my function is running these many times whenever I click on the donate text. How would I reformat to where my function is only run once after each option change? Or is there something fundamental that I am completely missing?

Answer 1

Is this closer to what you are trying to accomplish?

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>

Note, event listeners need to be attached only once. So, consider what it is the code is actually trying to accomplish.

Answer 2

You're binding a new click listener every time you call addEventListener every time the change listener is triggered if the select value is == .

If you want Michael to be printed only once if the select value is == , then bind all click listeners once, and check for the value inside it.

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