Highlighted

How to add event listener to an array of elements?

New Here ,
Jan 29, 2019

Copy link to clipboard

Copied

Hello!

I have a scene with 40 items. Named "item1,item2...item40". I want to add click event listener to all of them. I've tried a few things, but none of them works. My last attempt is:

for (var i = 0; i < items.length; i++) {

   items.addEventListener("click", EndLevel);

}

where the "items" is the array. It is always runs to an error. What should I do?

Thanks in advice,

S

In any case you need to add the eventListeners like this

for (var i = 0; i < items.length; i++) {

     this[items].addEventListener("click", EndLevel);

}

Klaus

Views

119

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to add event listener to an array of elements?

New Here ,
Jan 29, 2019

Copy link to clipboard

Copied

Hello!

I have a scene with 40 items. Named "item1,item2...item40". I want to add click event listener to all of them. I've tried a few things, but none of them works. My last attempt is:

for (var i = 0; i < items.length; i++) {

   items.addEventListener("click", EndLevel);

}

where the "items" is the array. It is always runs to an error. What should I do?

Thanks in advice,

S

In any case you need to add the eventListeners like this

for (var i = 0; i < items.length; i++) {

     this[items].addEventListener("click", EndLevel);

}

Klaus

Views

120

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 29, 2019 0
Advocate ,
Jan 29, 2019

Copy link to clipboard

Copied

Hi S

Are all items (buttons or movieclips?) dealt with using the same Event function EndLevel when clicked?

Can you share this EndLevel function?

function EndLevel (e) {

    // what is happening here?

}

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2019 0
Adobe Community Professional ,
Jan 29, 2019

Copy link to clipboard

Copied

Hi.

There are a number of ways you can do this.

Here are some:

Using for each to access the built-in children property that all CreateJS container objects have:

// for each, children

var tl = this;

tl.start = function(e)

{

    tl.children.forEach(function(item)

    {

          item.on("click", function(e)

          {

              console.log("click");

          });

    });

};

stage.on("drawstart", tl.start, this, true);

Using for loop to access the built-in children property that all CreateJS container objects have:

// reverse for loop, children

var tl = this;

tl.start = function(e)

{

    for (var i = tl.children.length - 1; i >= 0; i--)

    {

          tl.children.on("click", function(e)

          {

              console.log("click");

          });

    }

};

stage.on("drawstart", tl.start, this, true);

Using bracket notation if you want to access objects by a sequence of names:

// reverse for loop, bracket notation

var tl = this;

for (var i = 39; i >= 0; i--)

{

    tl.["item" + (i + 1)].on("click", function(e)

    {

          console.log("click");

    });

}

If the advanced layers mode is on, you may need to reference the layer name first.

So instead of just:

tl.children

It could be:

tl.Layer_1.children

Please let us know if this helps.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2019 0
Adobe Community Professional ,
Jan 29, 2019

Copy link to clipboard

Copied

JoãoCésar  wrote

There are a number of ways you can do this.

Using for each to access the built-in children property that all CreateJS container objects have:

Using for loop to access the built-in children property that all CreateJS container objects have:

Looping over the children object is a dangerous way to do this, because it attempts to add an event listener to every child object, no matter what it is. It's really not an advisable approach.

Secondly, even if one were using this approach, forEach should not be used on public-facing sites, because it fails on a non-trivial percentage of desktop browsers. Maybe in a few years it will be safe enough, but for now, no.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2019 0
Advocate ,
Jan 29, 2019

Copy link to clipboard

Copied

In any case you need to add the eventListeners like this

for (var i = 0; i < items.length; i++) {

     this[items].addEventListener("click", EndLevel);

}

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2019 0
Adobe Community Professional ,
Jan 29, 2019

Copy link to clipboard

Copied

Thanks for letting me know, Clay.

I just gave the OP a way of using the children property but certainly it woulbe be better to contain all the instances he or she wants to access in a separate container.

And I didn't know about this for each flaw. Thanks again!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2019 0
New Here ,
Jan 30, 2019

Copy link to clipboard

Copied

Thanks. It works. One more question. In the function, I want to set the visibility of the item to false, but on the same way it doesn't work.

for (var i = 0; i < items.length; i++) {

            _doc[items].addEventListener("click", Game = function(e) {

                _doc.[items].visible = false;

});

How should I do this?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2019 0
kdmemory LATEST
Advocate ,
Jan 30, 2019

Copy link to clipboard

Copied

Hi S

So you want to set all (40) items invisible? And what is _doc ? Did you put a variable on top of your script like var _doc = this ?

however if you want all items invisible (using _doc and Game instead of EndLevel as event function name):

var _doc = this;

for (var i = 0; i < itmes.length; i++) {

    _doc[items].addEventListener("click", Game);

    _doc[items].visible = false;

}

But this is actually nonsense because all items set to visible = false won't be clickable!

So, if you want to make those items invisible that have been clicked:

var _doc = this;

for (var i = 0; i < itmes.length; i++) {

    _doc[items].addEventListener("click", Game);

}

function Game (e) {

    // whatever you want do here

    e.target.visible = false;

}

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2019 0