Array value overwrites instead of retaining old value - Javascript

Question

This is what I want.

User enters a numerical input. If he enters 2, the code prompts to enter two player names.

The player names are stored in an array. There is a 'next' button in the page, when user clicks it, the code prompts to enter another two names.

The next is the tricky part: Right now there are four names entered on two separate sessions. Now I need a nested array should hold the usernames in separate arrays based on the session.

I've tried many codes but only the following at least comes closer. But what happens is, every time user enters a new list of usernames, a new array is created but previous arrays are also over written.

var TotalNumOfPlayers = prompt("Enter The Total Number Of Players! (For example 2)");
var nameOfPlayers = [];
var loopThroughAllNames = new Array(new Array());
var NextList = document.querySelector("#NextList");
var tempArr = [];

addValue();

function addValue() {
  for (var i = 0; i < TotalNumOfPlayers; i++) {
    tempArr[i] = prompt("Enter Player name "+(i+1));
  }

  loopThroughAllNames.push(tempArr);
}

NextList.addEventListener("click", function() {
  addValue();

});

<button id="NextList">Next list</button>

Sorry. This doesn't work. I just tried it out. It still overwrites the values. Thank you though. — Bhoopalan Thaati
– Bhoopalan Thaati, Commented Dec 4, 2017 at 12:50

gurvinder372 · Accepted Answer · 2017-12-04 12:51:26Z

3

Your for-loop always starts from 0 for the same tempArr (initialized once outside the addValue method), hence it overwrites the previous entries.

for (var i = 0; i < TotalNumOfPlayers; i++) {
    tempArr[i] = prompt("Enter Player name "+(i+1));
  }

You need to initialize the tempArr array inside the addValue method.

Demo

var loopThroughAllNames = [];
var TotalNumOfPlayers = prompt("Enter The Total Number Of Players!");
addValue();

function addValue () 
{
  var tempArr = [];
  for (var i = 0; i < TotalNumOfPlayers; i++) {
    tempArr[i] = prompt("Enter Player name");
  }
  loopThroughAllNames.push(tempArr);  
  console.log( loopThroughAllNames );
}

var NextList = document.querySelector("#NextList");
NextList.addEventListener("click", function() {
  addValue( );
});

<button id="NextList">Next list</button>

edited Dec 4, 2017 at 12:51

answered Dec 4, 2017 at 12:33

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

6 Comments

gurvinder372 Over a year ago

@mplungjan Nope, just tested. If tempArr is not initialized everytime, then it overwrites the previous values.

gurvinder372 Over a year ago

@mplungjan Thanks, I fixed it. I thought this is what OP wanted.

mplungjan Over a year ago

It actually still does not work. It does not ask for names unless I click next list - you need the initial addValue()

Bhoopalan Thaati Over a year ago

Seems like you were the first one to respond with exactly what I wanted. Thank you. It works perfect.

Bhoopalan Thaati Over a year ago

@mplungjan: That's fine. I was expecting that only. Only when the button is clicked, code will prompt user to enter names. Or else it would be infinite loop isn't it?

|

mplungjan · Accepted Answer · 2017-12-04 12:51:54Z

3

Check below link

JsFiddle

var TotalNumOfPlayers = prompt("Enter The Total Number Of Players! (For example 2)");
var loopThroughAllNames = [];
var NextList = document.querySelector("#NextList");

addValue();

function addValue() {
  var tempArr = [];
  for (var i = 0; i < TotalNumOfPlayers; i++) {
    tempArr[i] = prompt("Enter Player name " + (i + 1));
  }

  loopThroughAllNames.push(tempArr);
}

NextList.addEventListener("click", function() {
  addValue();
  document.write(JSON.stringify(loopThroughAllNames));
});

<button id="NextList">Next list</button>

edited Dec 4, 2017 at 12:51

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Dec 4, 2017 at 12:43

S A M

1515 bronze badges

Comments

Rajkumar Somasundaram · Accepted Answer · 2017-12-04 12:41:20Z

1

I am creating an array of arrays to insert names. tempArr is declared as empty inside addValue and later pushed into global array allnames

var TotalNumOfPlayers = prompt("Enter The Total Number Of Players! (For example 2)");
var nameOfPlayers = [];
var loopThroughAllNames = new Array(new Array());
var NextList = document.querySelector("#NextList");
var allnames = [];

addValue();

function addValue() {
  var tempArr = [];
  for (var i = 0; i < TotalNumOfPlayers; i++) {
    tempArr[i] = prompt("Enter Player name "+(i+1));
  }

  loopThroughAllNames.push(tempArr);
  allnames.push(tempArr);
}

NextList.addEventListener("click", function() {
  addValue();
  console.log(allnames)
});

<button id="NextList">Next list</button>

answered Dec 4, 2017 at 12:41

Rajkumar Somasundaram

1,2702 gold badges11 silver badges20 bronze badges

1 Comment

Bhoopalan Thaati Over a year ago

Thank you so much, Rajkumar. It works beautifully. Was scratching my head. The code works because the tempArr stays only inside the function "addValue". Thank you once again.

Collectives™ on Stack Overflow

Array value overwrites instead of retaining old value - Javascript

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related