JavaScript how to for loop different elements as a variable to apply in same functions

Question

I'm new to JavaScript,this question may looks very silly.

I have function like this:

  document.addEventListener('mouseup', function(e) {
        var container = document.getElementById('mySelectOptions');
        if (!container.contains(e.target)) {
            container.style.display = 'none';
        }
    });

And another almost same function like this:

  document.addEventListener('mouseup', function(e) {
        var container = document.getElementById('newSelectOptions');
        if (!container.contains(e.target)) {
            container.style.display = 'none';
        }
    });

The only difference is the id ,my question is how to add the 2 ids into this same function ?

maybe something like this:

for id in ['mySelectOptions','newSelectOptions']:
      document.addEventListener('mouseup', function(e) {
    var container = document.getElementById(id);
    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
});

I think you are looking for this: https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript — Dan Bowling, Apr 12 '23 at 00:34
Why don't you set a class for both elements that share the same event listener? — Starnec, Apr 12 '23 at 00:36
Does this answer your question? [How to loop over an Array with JavaScript?](https://stackoverflow.com/questions/6208964/how-to-loop-over-an-array-with-javascript) — Peter B, Apr 12 '23 at 00:37

Jordy · Accepted Answer · 2023-04-12T00:47:07.630

1

You can do that with .querySelectorAll to select all match elements with different id. These id can be write with , splitter (#newSelectOptions,#mySelectOptions).

document.addEventListener('mouseup', function(e) {
    var containers = document.querySelectorAll('#newSelectOptions,#mySelectOptions');
    [...containers].forEach(function(container) {
        if (!container.contains(e.target)) {
            container.style.display = 'none';
        }
    });
});

edited Apr 12 '23 at 00:47

answered Apr 12 '23 at 00:37

Jordy

1,802
2
6
25

2

You can use `containers.forEach...` because querySelector will return a node list. – Shuo Apr 12 '23 at 00:51

score 1 · Answer 2 · edited Apr 12 '23 at 00:51

You can create a function that wrap your DOM function code

function hideContainer(containerId) {
    var container = document.getElementById(containerId);
    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}

document.addEventListener('mouseup', function(e) {
    hideContainer('mySelectOptions');
});


document.addEventListener('mouseup', function(e) {
    hideContainer('newSelectOptions');
});

Starnec · Answer 3 · 2023-04-12T00:54:16.733

1

You can create an array of the Ids in case you do not want to work with classes.

let elemntsIds= ['mySelectOptions', 'newSelectOptions'];

elemntsIds.forEach(function(id) {
  document.addEventListener('mouseup', function(e) {
    var container = document.getElementById(id);
    if (!container.contains(e.target)) {
      container.style.display = 'none';
    }
  });
});

Keep in mind that I used the let for defining the array outside the function handler body since it is block-scoped, you will need to declare it as var inside the function handler body so it can be hoisted and to avoid a new instance from being created each time the event is triggered

edited Apr 12 '23 at 00:54

answered Apr 12 '23 at 00:49

Starnec

551
1
5
15

declaring it as a `var` does hoist it to the top of the callback, but it still declares a new variable (and runs the query) every time the event is triggered. If you want a closure, declare it as a `const` before the `addEventListener` call. – pilchard Apr 12 '23 at 01:15

JavaScript how to for loop different elements as a variable to apply in same functions

3 Answers3