Board Game Arena

Posted: **10 March 2022, 02:25**

Thanks for any advice and insight

I get multiple event listeners when I add event listeners to dynamically created node ids with the for loop.
How would you add event listeners to dynamically created nodes using the for loop?
Why are multiple event listeners created for each node id when I use any for loop?

Here is my example code

Code: Select all


            for( var player_id in gamedatas.players ){
				this.num_players++;
				let room_id = "#bottom_card" + this.num_players.toString();
				dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );		
            }

I have tried using a forEach loop and had the same results

Code: Select all

           for( var player_id in gamedatas.players ){
				this.num_players++;
				let room_id = "#bottom_card" + this.num_players.toString();
				dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );	
				this.selectables.push(room_id);	
            }
            this.selectables.forEach( node_id => dojo.connect( $( node_id ), 'onclick', this, 'onRoomSelect' ));

manually listing each one works well though - I get 1 event listener for each node.

Code: Select all

			dojo.connect( $('bottom_card1'), 'onclick', this, 'onRoomSelect' );
			dojo.connect( $('bottom_card2'), 'onclick', this, 'onRoomSelect' );
			dojo.connect( $('bottom_card3'), 'onclick', this, 'onRoomSelect' );
			dojo.connect( $('bottom_card4'), 'onclick', this, 'onRoomSelect' );

Thanks

Posted: **10 March 2022, 14:14**

Your working and non-working code snippets are not doing the same thing at all!

Where you have this:

dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );

I assume you mean:

dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );

since room_id is a variable containing the HTML id (as a string) of the required element. As it is, you're attaching the listener - multiple times - to the same element, that whose id is literally 'room_id' (assuming such an element exists, which I find surprising but seems to be the case from your description of what is happening).

Posted: **12 March 2022, 07:15**

robinzig wrote: ↑10 March 2022, 14:14 Your working and non-working code snippets are not doing the same thing at all!

Where you have this:

dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );

I assume you mean:

dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );

since room_id is a variable containing the HTML id (as a string) of the required element. As it is, you're attaching the listener - multiple times - to the same element, that whose id is literally 'room_id' (assuming such an element exists, which I find surprising but seems to be the case from your description of what is happening).

Thanks for helping me fix the problem, robinzig

You are correct,
my code was dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );

I was attaching the listener multiple time to the same element when I had room_id = "#bottom_card" + this.num_players.toString();
and then had dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );

when i removed the # from room_id, I no longer had multiple event listeners !

Thanks !

Board Game Arena

javascript question - for loop and event listeners

javascript question - for loop and event listeners

Re: javascript question - for loop and event listeners

Re: javascript question - for loop and event listeners