CODEWITHSUNDEEP
javascriptgoogle-chromeselectonchangemozilla
Yevgeniy Makkoyev
Yevgeniy Makkoyev

Reputation: 17

Selection onChange is not working on Chrome

I'm using mainly Mozilla, but right now i noticed that some codes is not running on Chrome, such as select>option with eventListener.

This is the link of the page: https://musing-jang-0e572c.netlify.com/senate-data.html Check it on both Chrome and Mozilla..

I want this part work also for Chrome. How can i achieve this?

cbs = document.querySelectorAll("input[type=checkbox]");
selector = document.querySelectorAll("#selector option");

(function() {
  targets = document.querySelectorAll("#table tr td:nth-child(3)");
  newTr = document.querySelectorAll("#table tr");
  for (var z = 0; z < cbs.length; z++) {
    cbs[z].addEventListener("change", function() {
      targets = document.querySelectorAll("#table tr td:nth-child(3)");
      newTr = document.querySelectorAll("#table tr");
      console.log(newTr);
      console.log(targets);
    })
  }
  // DA FIXARE OPTION => CHECKBOX NEW
  for (l = 0; l < selector.length; l++) {
    selector[l].addEventListener("click", function() {
      for (var i = 0; i < targets.length; i++) {
        //console.log(i);
        newTr[i].classList.add("hide-row");
        if (targets[i].innerHTML == this.value && newTr[i].classList.contains("hide-row")) {
          //console.log("Match: " + i);
          newTr[i].classList.remove("hide-row");
        } else if (this.innerHTML === "ALL"){
          for (let i = 0; i < targets.length; i++) {
            newTr[i].classList.remove("hide-row");
          }
        }
      }
    });
  }
  for (var p = 0; p < cbs.length; p++) {
    cbs[p].addEventListener("change", function() {
      console.log("Checkbox");
    })
  }
})();

Upvotes: 1

Views: 1555

Answers (1)

Avinash Murugesan
Avinash Murugesan

Reputation: 46

Semantically, we shouldn't be adding a "click" listener to an option tag. The <select> tag has an "change" event that you can listen to, and then do your appropriate changes when a <option> is changed.

Please refer to this MDN link. Hope this helps.

Upvotes: 1

Related Questions