How can I push array values checked in checkboxes made from a for loop to another array?

Question

for the purpose of what I am doing I used a for loop to create check boxes from a previous array instead of doing it through html. This loop takes the object's.name value from the players array and displays it as a checkbox that can be checked if that player wants to play.

let playing = [];//8 players maximum

//array displayed as check boxes
var players = [
  {"name": "Tyler", "score": 4},
  {"name": "Nick", "score": 4},
  {"name": "Patrick score 3", "score": 3},
  {"name": "Jack", "score": 3},
  {"name": "Aboss", "score": 3},
  {"name": "Colin", "score": 1}, 
  {"name": "Sling", "score": 1},
  {"name": "Joe", "score": 2},
  {"name": "Terrrence", "score": 2},
  {"name": "Scott", "score": 4},
]

//loop to display players[] as checkboxes
var myDiv = document.getElementById("cboxes");

for (var i = 0; i < players.length; i++) {
    var checkBox = document.createElement("input");
    var label = document.createElement("label");
    checkBox.type = "checkbox";
    checkBox.value = players[i];
    myDiv.appendChild(checkBox);
    myDiv.appendChild(label);
    label.appendChild(document.createTextNode(players[i].name));
}

I am having trouble figuring out how to push the objects from the selected boxes to a new array called playing (or the name value at the least) because later I will need to use the.score value associated with the name as well. I would also like to include an error message if more or less than 8 players are selected. I have a single html button:

<button onclick="checkCheckbox()">Push to playing array</button> <br>   

And this is my placeholder function for when the button is pressed:

function checkCheckbox(){
  playing.push(document.getElementById("cboxes"));
}

Thanks fellow nerds

Answer 1

If I understood your question correctly, pushing the player name and the score to the playing array.

If you wanted to set the score to the value of the each checkbox, you need to specify it with .score checkBox.value = players[i].score

 let playing = [];//8 players maximum //array displayed as check boxes let players = [ {"name": "Tyler", "score": 4}, {"name": "Nick", "score": 4}, {"name": "Patrick", "score": 3}, {"name": "Jack", "score": 3}, {"name": "Aboss", "score": 3}, {"name": "Colin", "score": 1}, {"name": "Sling", "score": 1}, {"name": "Joe", "score": 2}, {"name": "Terrrence", "score": 2}, {"name": "Scott", "score": 4}, ] //loop to display players[] as checkboxes let myDiv = document.getElementById("cboxes"); for (let i = 0; i < players.length; i++) { let checkBox = document.createElement("input"); let label = document.createElement("label"); checkBox.type = "checkbox"; checkBox.value = players[i].score; checkBox.id = 'player-'+i; label.htmlFor = 'player-'+i; myDiv.appendChild(checkBox); myDiv.appendChild(label); label.appendChild(document.createTextNode(players[i].name)); } function checkCheckbox(){ let checkedPlayers = document.querySelectorAll('#cboxes input'); let amountOfPlayers = 0; playing = []; for(let i = 0; i < checkedPlayers.length; i++){ if(checkedPlayers[i].checked){ amountOfPlayers++; playing.push( {"name": checkedPlayers[i].nextSibling.textContent, "score":checkedPlayers[i].value } ) } } if(amountOfPlayers?= 8){ let errMessage = amountOfPlayers < 8, 'You only selected '+amountOfPlayers+ ' players: make sure to select 8 players'. 'You have selected too many players (8 max);'; alert(errMessage), } else { alert('All good, 8 players have been selected; time to play:'). // we have our 8 players; console.log(playing); } }

 <div id="cboxes"></div> <button onclick="checkCheckbox()">Push to playing array</button> <br>

Answer 2

The below should achieve all of your objectives for you!

One thing to note is, the function will wipe the playing array and populate it from an empty array each time the button is pressed, I thought this would be much easier than checking for duplicated objects within the array.

 let playing = [];//8 players maximum //array displayed as check boxes const players = [ {"name": "Tyler", "score": 4}, {"name": "Nick", "score": 4}, {"name": "Patrick", "score": 3}, {"name": "Jack", "score": 3}, {"name": "Aboss", "score": 3}, {"name": "Colin", "score": 1}, {"name": "Sling", "score": 1}, {"name": "Joe", "score": 2}, {"name": "Terrrence", "score": 2}, {"name": "Scott", "score": 4}, ] //loop to display players[] as checkboxes const myDiv = document.getElementById("cboxes"); for (let i = 0; i < players.length; i++) { let checkBox = document.createElement("input"); let label = document.createElement("label"); checkBox.type = "checkbox"; checkBox.value = players[i]['score']; checkBox.name = players[i]['name']; myDiv.appendChild(label); label.appendChild(checkBox); label.appendChild(document.createTextNode(players[i].name)); } function checkCheckbox() { const checkedInputs = myDiv.querySelectorAll('input[type="checkbox"]:checked'); playing = []; for (let i = 0; i < checkedInputs.length; i++) { if (i < 8) { playing.push({"name": checkedInputs[i].name, "score": checkedInputs[i].value}); } } console.log(playing); }

 <div id="cboxes"></div> <button onclick="checkCheckbox()">Push to playing array</button> <br>