CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-extension
KimLikeAStone
KimLikeAStone

Reputation: 109

Why all click events for checkboxes is called although I clicked only one checkbox?

I checked only one checkbox but another click listeners attached to other checkboxes are invoked. I don't think this is a typical case of event bubbling. How do I solve this issue?

I already checked if this is related to event bubbling. But I don't think so because my input tags are horizontal.

Popup.html

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
      <h3>Input game title to search metacritic score!</h3><br>
      <p>Press the "Enter" key inside the input field to trigger the button.</p>
      <input id="gameTitle" value="Example : &quot;Gears 5&quot;">
      <input type="checkbox" name="Pc" id="pcCheck">PC<br>
      <input type="checkbox" name="Ps4" id="ps4Check">PS4<br>
      <input type="checkbox" name="Xbox" id="xboxCheck">XBOX<br>
      <input type="checkbox" name="Switch" id="switchCheck">SWITCH<br>
      <button id="confirmBtn">Confirm</button>
    <p id = "content"></p>
    <script src="popup.js"></script>
  </body>
</html>

Popup.js

var dict = {};
dict["confirmBtn"] = document.getElementById("confirmBtn");
dict["pcCheck"] = document.getElementById("pcCheck");
dict["ps4Check"] = document.getElementById("ps4Check");
dict["xboxCheck"] = document.getElementById("xboxCheck");
dict["switchCheck"] = document.getElementById("switchCheck");

document.addEventListener('DOMContentLoaded', function() {
 dict["confirmBtn"].addEventListener("click", confirmBtnEvent);
 dict["pcCheck"].addEventListener("click", CheckEvent("pcCheck"),{capture:true});
 dict["ps4Check"].addEventListener("click", CheckEvent("ps4Check"),{capture:true});
 dict["xboxCheck"].addEventListener("click", CheckEvent("xboxCheck"),{capture:true});
 dict["switchCheck"].addEventListener("click", CheckEvent("switchCheck"),{capture:true});
});

I want one specific event listener to be called when the corresponding checkbox is clicked.

Upvotes: 0

Views: 226

Answers (1)

Barmar
Barmar

Reputation: 781503

You're not calling addEventListener correctly. The argument should be a function reference, not the result of calling the function. And the options need to be an argument to addEventListener.

dict["pcCheck"].addEventListener("click", function() {
    CheckEvent("pcCheck");
},{capture:true});

However, if you change CheckEvent slightly, you can simplify it to:

dict["pcCheck"].addEventListener("click", CheckEvent, {capture:true});

When an event listener is called, this is set to the target of the event, so you can just use this inside the function, rather than calling document.getElementById() with the argument.

Upvotes: 1

Related Questions