How to add array to includes() javascript

Question

Im using composedPath for detect click outer of elements, but if elements more then 1 i need to add them all in if(). Maybe in js have another way? Im trying .includes(document.querySelectorAll(".js-open-user")); But thats not work.

document.addEventListener("click", (event) => {
let b1 = event
        .composedPath()
        .includes(document.querySelectorAll(".js-open-user")[0]);

let b2 = event
        .composedPath()
        .includes(document.querySelectorAll(".js-open-user")[1]);

let b3 = event
        .composedPath()
        .includes(document.querySelectorAll(".js-open-user")[2]);

if (!b1 && !b2 && !b3) this.closeUser();
});

a-d · Accepted Answer · 2021-02-09 11:54:00Z

1

You can convert a NodeList to an array by using Array.prototype.slice.call(). Then using Array.prototype.some() to check that at least one matches the criterion, if not you can use this.closeUser() which is not implemented in my example.

document.addEventListener("click", (evt) => {
  const openUsers = Array.prototype.slice.call(document.querySelectorAll('.js-open-user'));
  const composedPath = evt.composedPath();
  
  if (!openUsers.some(user => composedPath.includes(user))) {
    // no open users found...
    alert('no matches!');
    return;
  }
  
  alert('match!');
});

<div class="js-open-user">hi</div>
<div class="js-open-user">oop</div>
<div class="js-open-user">test</div>
<div class="js-open-user">last one</div>

answered Feb 9, 2021 at 11:54

a-d

10.9k2 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

szatkus · Accepted Answer · 2021-02-09 11:39:50Z

0

const nodes = document.querySelectorAll(".js-open-user");
const intersection = event.composedPath().filter(n => nodes.includes(n));

answered Feb 9, 2021 at 11:39

Collectives™ on Stack Overflow

How to add array to includes() javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related