Changing the addClass in a javascript function to be called twice

Question

I have the function below:

var players = function(){ var $div = $('<div>').attr('id', 'prompt'); var $input = $('<input>').attr('class', 'player' + playerNames); var $p = $('<p>').attr('class', 'player' + playerNames).html("Enter First Player" ); $div.append($input).append($p); $('.container').append($div); $('input').keydown(function(e) { if(e.keyCode === 13) { $div.addClass('move-left').removeAttr('id'); playerOne = $input.val(); $p.html($input.val()) $input.remove(); } }); }

I want to call this function twice in a row.

I want the .addClass('move-left') to be addClass('move-right') playerNames which starts at 0 to be 1 and finally for the "Enter First Player" to be "Enter Second Player".

Do I need a for? if so does it have to wrap the entire function?

Thanks!

It's not really clear what you want to do. Could you elaborate ? — Alvaro Silvino
– Alvaro Silvino, Commented Sep 30, 2015 at 20:54
use hasClass() to check if .addClass('move-left') has occurred and if it has then addClass('move-right') -- okay after your edit im not sure what your after in the rest of your question — Craicerjack
– Craicerjack, Commented Sep 30, 2015 at 20:55
players function creates a div that takes an input from the user then transitions left. After that happens I want the processes repeated again only this time after the second user input, the div transitions right. Is there a way to do this without copy and pasting the function? — Harry Potter
– Harry Potter, Commented Sep 30, 2015 at 20:57

Chris Perkins · Accepted Answer · 2015-09-30 21:05:42Z

What about passing those things as parameters to the function? And, perhaps instead of playerOne being closed over, make a local variable that you declare and return

var players = function(promptStr, classStr){ var $div = $('<div>').attr('id', 'prompt'); var $input = $('<input>').attr('class', 'player' + playerNames); var $p = $('<p>').attr('class', 'player' + playerNames).html(promptStr ); $div.append($input).append($p); $('.container').append($div); var playerX = {name:null}; $('input').keydown(function(e) { if(e.keyCode === 13) { $div.addClass(classStr).removeAttr('id'); playerX.name = $input.val(); $p.html($input.val()) $input.remove(); } }); return playerX; } var playerOne = players("Ready Player One", "move-left"); var playerTwo = players("Enter Player Two", "move-right");

I made a small mistake, returning playerX like that won't work. You can make playerX be an object {player:null} and return that, then set playerX.player in the keydown callback. Or use a promise.
Now that code is creating three divs simultaneously and I was tying to have just two divs pop up one after the other. Thats what Im trying to figure out :)

Craicerjack · Accepted Answer · 2015-09-30 21:02:44Z

With an if statement

 $('input').keydown(function(e) { if(e.keyCode === 13) { if ($div.hasClass('move-left') { $div.addClass('move-right').removeAttr('id'); } else { $div.addClass('move-left').removeAttr('id'); } playerOne = $input.val(); $p.html($input.val()) $input.remove(); } });

Collectives™ on Stack Overflow

Changing the addClass in a javascript function to be called twice

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related