How to store elements in javascript array?

Question

I am trying to build a card game in which two players gets random cards and the one who gets the highest sum of cards wins.

I tried pushing the generated random number into array .The trouble here is the new number should add to array but instead its going off leaving array empty. Could someone please help me.

 var varCounter = 1;
 var refVar = setInterval(function() {
 
 if (varCounter <= 4) {
 
 var randomnumber = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 var player1 = [];
 player1.push(randomnumber);
 
 for (var i = 0; i < player1.length; i++) {
 document.write("<br>");
 document.write("player1 " + i + "card");
 document.write("<br>");
 document.write(player1[i]);
 
 }
 varCounter++;
 } else if (varCounter >= 5 && varCounter <= 8) {
 var randomnumber2 = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 var player2 = [];
 player2.push(randomnumber2);
 for (var i = 0; i < player2.length; i++) {
 document.write("<br>");
 document.write("player2 " + i + "card");
 document.write("<br>");
 document.write(player2[i]);
 }
 varCounter++;
 } else {
 clearInterval(refVar);
 }
 }, 100);

EXPECTED OUTPUT:

player1 1card
9
player1 2card
12
player1 3card
4
player1 4card
12
player2 1card
5
player2 2card
7
player2 3card
9
player2 4card
2 

CURRENT OUTPUT:

player1 0card
9
player1 0card
12
player1 0card
4
player1 0card
12
player2 0card
5
player2 0card
7
player2 0card
9
player2 0card
2

• JJJ: On every loop you do var player1 = [] which creates a new array. The array never gets a chance to get more than one element.
• Jared Smith: @GabeRogan has nothing to do with closure.
• user9074131: Thank you so much Gabe Rogan .Even changing it to let i haven't changed my output.
• ionizer: Changing to let isn't going to change the output, as in every interval tick you reinitialize your player arrays as @JJJ also said. Therefore, the i iterator in your loop is always 0. Try moving those two out of the setInterval(). Or if you only want to show the 1 2 3 4card, use document.write("player " + varCounter%4 + "card");
• epascarello: You should not use document.wrtie.

Answer 1

As the comments on your question pointed out, your arrays player1 and player2 get overwritten each time you iterate through your counter as it's contained within the iteration, if you like to write something with every iteration, I suggest taking out your for loop like this:

if (varCounter <= 4) {
 var randomnumber = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 var player1 = [];
 player1.push(randomnumber);
 document.write("<br>");
 document.write("player1 " + varCounter + "card"); // varCounter becomes your 1 2 3 4card
 document.write("<br>");
 document.write(player1);
 varCounter++;
}

Or exploring a while loop like this: https://codepen.io/corviday/pen/pdMyEw?editors=1010

Hope this helps!

• ionizer: That needs to be varCounter%4 + 1. But most importantly, does this work?

Answer 2

This is what I finally came up with.

var varCounter = 0;
var player1 = [];
var player2 = [];
var refVar = setInterval(function() {
 if (varCounter <= 3) {
 var randomnumber = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 player1.push(randomnumber);
 var i = varCounter % 4;
 for (i; i < player1.length; i++) {
 document.write("<br>");
 document.write("player1 " + (i + 1) + "card");
 document.write("<br>");
 document.write(player1[i]);
 }
 varCounter++;
 } else if (varCounter >= 4 && varCounter <= 7) {
 var randomnumber2 = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 player2.push(randomnumber2);
 var i = varCounter % 4;
 for (i; i < player2.length; i++) {
 document.write("<br>");
 document.write("player2 " + (i + 1) + "card");
 document.write("<br>");
 document.write(player2[i]);
 }
 varCounter++;
 } else {
 clearInterval(refVar);
 }
}, 100)

• user9074131: @ionizer Yes,when I inspect that its working.I can see the length increasing. Is there an another way to check the array?
• ionizer: You're welcome. One last thing though, you don't seem to need the for loop anymore as I shown in my edited answer. Just a little optimization :)

Answer 3

Try this if you only wanted the desired output. I changed varCounter-related code so it works with the varCounter modulo % nicely and made it into runnable snippet.

var varCounter = 0;
var refVar = setInterval(function() {
 if (varCounter < 4) {
 var randomnumber = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 var player1 = [];
 player1.push(randomnumber);
 for (var i = 0; i < player1.length; i++) {
 document.write("<br>");
 document.write("player1 " + (varCounter%4+1) + "card");
 document.write("<br>");
 document.write(player1[i]);
 }
 varCounter++;
 } else if (varCounter >= 4 && varCounter < 8) {
 var randomnumber2 = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 var player2 = [];
 player2.push(randomnumber2);
 for (var i = 0; i < player2.length; i++) {
 document.write("<br>");
 document.write("player2 " + (varCounter%4+1) + "card");
 document.write("<br>");
 document.write(player2[i]);
 }
 varCounter++;
 } else {
 clearInterval(refVar);
 }
}, 100);

Or if you really want the result which you fill the array with card values, (EDITED: Removed the for loops, add in the for loops again to check the array content)

var varCounter = 0;
var player1 = [];
var player2 = [];
var refVar = setInterval(function() {
 if (varCounter < 4) {
 var randomnumber = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 player1.push(randomnumber);
 document.write("<br>");
 document.write("player1 " + (varCounter%4+1) + "card");
 document.write("<br>");
 document.write(player1[varCounter%4] + " "); //Removed for loop
 varCounter++;
 } else if (varCounter >= 4 && varCounter < 8) {
 var randomnumber2 = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 player2.push(randomnumber2);
 document.write("<br>");
 document.write("player2 " + (varCounter%4+1) + "card");
 document.write("<br>");
 document.write(player2[varCounter%4] + " "); //Removed for loop
 varCounter++;
 } else {
 clearInterval(refVar);
 }
}, 100);

EDIT: OP's Final Answer:

var varCounter = 0;
var player1 = [];
var player2 = [];
var refVar = setInterval(function() {
 if (varCounter <= 3) {
 var randomnumber = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 player1.push(randomnumber);
 var i = varCounter % 4;
 for (i; i < player1.length; i++) {
 document.write("<br>");
 document.write("player1 " + (i + 1) + "card");
 document.write("<br>");
 document.write(player1[i]);
 }
 varCounter++;
 } else if (varCounter >= 4 && varCounter <= 7) {
 var randomnumber2 = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
 player2.push(randomnumber2);
 var i = varCounter % 4;
 for (i; i < player2.length; i++) {
 document.write("<br>");
 document.write("player2 " + (i + 1) + "card");
 document.write("<br>");
 document.write(player2[i]);
 }
 varCounter++;
 } else {
 clearInterval(refVar);
 }
}, 100)

• user9074131: I think the array is not storing in first code snippet. Excuse me if 'm wrong
• ionizer: The first one is just to fix the "player " + i +"card" output so it goes 1card 2card 3card 4card. So yes, it always has only a single element and not storing more.