Board Game Arena

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

Thanks for any advice and insight

I get multiple event listeners when I use the for loop to dynamic node ids.
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 - multiple event listeners for each node id

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 and only 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, 03:48**

You know there is a joke in here since you posted the same question twice ... but that aside.

I'm sort of surprised you get any listeners, so take this advice with a grain of salt because maybe I'm missing something just looking at the code.

But when you do this:

Code: Select all

   	let room_id = "#bottom_card" + this.num_players.toString();
	dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );

You're not passing the variable room_id to $() - you're passing a string literal 'room_id'. I think you would want it to be just this without the quote's:

Code: Select all

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

Also - in your hard coded sample at the bottom, you didn't include the # sign, but you did in your loop when setting room_id. I think you don't need it in this case for $(). I think that's more for dojo.query('#bottom_card1') - but $() just takes the id element directly.

So final solution would be:

Code: Select all

   	var room_id = "bottom_card" + this.num_players.toString();
	dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );

Or better yet - why store a variable at all?

Code: Select all

	dojo.connect( $("bottom_card" + this.num_players.toString()), 'onclick', this, 'onRoomSelect' );

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

DexterHugo wrote: ↑10 March 2022, 03:48 You know there is a joke in here since you posted the same question twice ... but that aside.

I'm sort of surprised you get any listeners, so take this advice with a grain of salt because maybe I'm missing something just looking at the code.

But when you do this:
Code: Select all
   	let room_id = "#bottom_card" + this.num_players.toString();
	dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );		
You're not passing the variable room_id to $() - you're passing a string literal 'room_id'. I think you would want it to be just this without the quote's:
Code: Select all
	dojo.connect($(room_id), 'onclick', this, 'onRoomSelect');
Also - in your hard coded sample at the bottom, you didn't include the # sign, but you did in your loop when setting room_id. I think you don't need it in this case for $(). I think that's more for dojo.query('#bottom_card1') - but $() just takes the id element directly.

So final solution would be:
Code: Select all
   	var room_id = "bottom_card" + this.num_players.toString();
	dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );		
Or better yet - why store a variable at all?
Code: Select all
	dojo.connect( $("bottom_card" + this.num_players.toString()), 'onclick', this, 'onRoomSelect' );		

[/quote]

Thanks for helping me fix the problem, DexterHugo

I accidentally created to posts of the same thing. LOL

you are correct, I didn't include the # sign, and it was the # in "dojo.connect( $("#bottom_card" + this.num_players.toString()), 'onclick', this, 'onRoomSelect' );" that was the problem.

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

Thanks !

Board Game Arena

javascript question - using for loop for dynamic event listeners creates multiple event listeners

javascript question - using for loop for dynamic event listeners creates multiple event listeners

Re: javascript question - using for loop for dynamic event listeners creates multiple event listeners

Re: javascript question - using for loop for dynamic event listeners creates multiple event listeners