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

On every loop you do var player1 = [] which creates a new array. The array never gets a chance to get more than one element. — JJJ
– JJJ, Commented Dec 8, 2017 at 20:08
Thank you so much Gabe Rogan .Even changing it to let i haven't changed my output. — user9074131
– user9074131, Commented Dec 8, 2017 at 20:15
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"); — ionizer
– ionizer, Commented Dec 8, 2017 at 20:16

corv · Accepted Answer · 2017-12-08 20:48:59Z

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!

answered Dec 8, 2017 at 20:48

corv

315 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ionizer Over a year ago

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

ionizer · Accepted Answer · 2017-12-08 21:39:36Z

1

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)

edited Dec 8, 2017 at 21:39

ionizer

1,73112 silver badges23 bronze badges

answered Dec 8, 2017 at 21:33

user9074131

831 gold badge3 silver badges12 bronze badges

2 Comments

user9074131 Over a year ago

@ionizer Yes,when I inspect that its working.I can see the length increasing. Is there an another way to check the array?

ionizer Over a year ago

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 :)

ionizer · Accepted Answer · 2017-12-08 22:35:38Z

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)

I think the array is not storing in first code snippet. Excuse me if 'm wrong
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.

Collectives™ on Stack Overflow

How to store elements in javascript array?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related