Passing multiple variables to an event listener

Question

I am working with the Google Maps API and multiple markers. On a marker, there needs to be a click event to open an info window. I got that part working. I was wondering if there was a way to pass multiple variables and add the same event listener on all those markers?

I currently have:

google.maps.event.addListener(marker, 'click', function () {
                        _(that.popups).each(function (popup) {
                            popup.hide();
                        }).value();

                        infowindow.show(/*that.map, marker*/);
                    });

If I have a nyMarker variable, then a laMarker variable, how do I pass on this to the event handler?

Animesh Jha · Accepted Answer · 2022-02-04 05:38:26Z

Its very simple; there are two methods as you want to do, both of them work; what you have to do is just use forEach() like this -

#First Method

Here first you have to add a new and same class to all your elements (or use the old one if you already have) and then access them using querySelectorAll() function.
Then you have to use forEach() to target all of them

// accessing the elements with same classname using querySelectorAll() function
const elements = document.querySelectorAll('.my-box');

// adding the event listener by looping
elements.forEach(element => {
   element.addEventListner('click', ()=>{
     console.log('action');
   });
});

#SecondMethod

First you have to initialize all the variables through querySelector() or getElementsByClassName()[] or how ever you want do so..

const element1 = document.querySelector('.a');
const element2 = document.querySelector('.b');
const element3 = document.querySelector('.c');

Then you have to target them using forEach() like this -

[element1, element2, element3].forEach((element)=>{
    element.addEventListner('click', ()=>{
      console.log('action');
   });
});

score 0 · Accepted Answer · 2018-03-06 22:37:50Z

0

This is just possible by adding them to one result-set. I would prefer using jQuery instead of plain javascript:

var elems = [$element1, $element2, $element3, ...];
var $result = $();

$.each(elems, function() {
    $result = $result.add(this);
});

$result.bind(...);

Multiple values are not working in this case :)

Hope this helps! Let me know if you got further questions!

edited Mar 6, 2018 at 22:37

answered Mar 6, 2018 at 22:25

user9453460

5 Comments

user3730179 Over a year ago

I saw the answer for elements but my markers are not elements. they are variables that have data. I am not sure if this is the same logic.

user9453460 Over a year ago

Looks like I could't follow your thoughts the right way...

What do you mean with I was wondering if there was a way to pass multiple variables to an event listener because i have multiple different marker variables.

? :) @user3730179

user3730179 Over a year ago

my variable is not an element. an example is this jsfiddle.net/drmak3os/1

user9453460 Over a year ago

>So then I'm pretty sure yo are able to use the variables if they are defined before the event listener. Don't you? @user3730179

user3730179 Over a year ago

@user3730179 so I can keep adding variables after the comma? so google.maps.event.addListener(marker, laMarker, nyMarker ....

Collectives™ on Stack Overflow

Passing multiple variables to an event listener

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related