CODEWITHSUNDEEP
javascriptarrays
råby
råby

Reputation: 33

How do I create an array from a list

So basically I have made an array and a function that shows the array in a list in my HTML. Now I want to create a new array made out of the chosen ones in the list.

My array:

var fighters = [
  {
     "name": "Abdi",
     "HP": 100,
     "DMG": 20
  },
  {
     "name": "chriz",
     "HP": 100,
     "DMG": 40
  },
  {
     "name": "Erik",
     "HP": 120,
     "DMG": 11
  }
];

The 2 lists made out of my array.

for (var fighter of fighters) listX.innerHTML += `<option value="${fighter.name}">${fighter.name}</option>` ;
for (var fighter of fighters) listY.innerHTML += `<option value="${fighter.name}">${fighter.name}</option>` ;

I basically want a new array called chosen made out of the options I chose in the 2 lists I have, so I can later use it in myFunction() code/function.

the rest of my code :

function choose() {
  var playerX = document.getElementById('listX').value;
  document.getElementById('FighterX').innerHTML = "you selected " + playerX;

  var playerY = document.getElementById('listY').value;
  document.getElementById('FighterY').innerHTML = "you selected " + playerY;
}

function myFunction() {

  while (chosen[0].HP > 0 && chosen[1].HP > 0) {
    chosen[1].HP -= chosen[0].HP;
    chosen[0].HP -= chosen.DMG;
    document.getElementById('resultX').innerHTML += chosen.HP;
    document.getElementById('resultY').innerHTML += chosen.HP;
  }
}

Upvotes: 1

Views: 158

Answers (2)

Brandon McConnell
Brandon McConnell

Reputation: 6129

I wasn't exactly sure about a few different aspects of your program, since you seem to be calling chosen without indexes near the end, and I also adjusted the logic at the end to parse the values as integers when performing your mathematic functions. Let me know if this is what you were looking for!

const listX = document.getElementById('listX');
const listY = document.getElementById('listY');

const fighters = [
  {
    name: "Abdi",
    HP: 100,
    DMG: 20
  }, {
    name: "Chriz",
    HP: 100,
    DMG: 40
  }, {
    name: "Erik",
    HP: 120,
    DMG: 11
  }
];

for (let fighter of fighters) listX.innerHTML += `<option value="${fighter.name}">${fighter.name}</option>`;
for (let fighter of fighters) listY.innerHTML += `<option value="${fighter.name}">${fighter.name}</option>`;

const chosen = Array(2).fill();

function choose() {
  const playerX = document.getElementById('listX').value;
  document.getElementById('FighterX').innerHTML = "you selected " + playerX;
  chosen[0] = fighters.find(fighter => fighter.name === playerX);
  const playerY = document.getElementById('listY').value;
  document.getElementById('FighterY').innerHTML = "you selected " + playerY;
  chosen[1] = fighters.find(fighter => fighter.name === playerY);
}
choose();
document.addEventListener('change', e => e.target?.matches('select') && ['listX','listY'].includes(e.target.id) && choose());

function myFunction() {
  const chosenPlayers = chosen.map(fighter => ({ ...fighter }));
  document.getElementById('resultX').innerHTML = '';
  document.getElementById('resultY').innerHTML = '';
  while (chosenPlayers[0].HP > 0 && chosenPlayers[1].HP > 0) {
    chosenPlayers[1].HP -= chosenPlayers[0].HP;
    chosenPlayers[0].HP -= chosenPlayers[1].DMG;
    document.getElementById('resultX').innerHTML = (parseInt(document.getElementById('resultX').innerHTML) || 0) + chosenPlayers[0].HP;
    document.getElementById('resultY').innerHTML = (parseInt(document.getElementById('resultY').innerHTML) || 0) + chosenPlayers[1].HP;
  }
}
<strong>List X</strong>
<select id="listX"></select>
<div id="FighterX"></div>
<div id="resultX"></div>
<strong>List Y</strong>
<select id="listY"></select>
<div id="FighterY"></div>
<div id="resultY"></div>
<button onclick="myFunction()">Run simulation</button>

Upvotes: 2

imvain2
imvain2

Reputation: 15857

First, you can combine your options appending into one loop.

Here is a working example. It uses an event listener for each select as well as uses filter for searching the fighters by name

let listX = document.querySelector(".listX");
let listY = document.querySelector(".listY");
let FighterX = document.querySelector(".FighterX");
let FighterY = document.querySelector(".FighterY");
let chosen = []
let fighters = [{
    "name": "Abdi",
    "HP": 100,
    "DMG": 20
  },
  {
    "name": "chriz",
    "HP": 100,
    "DMG": 40
  },
  {
    "name": "Erik",
    "HP": 120,
    "DMG": 11
  }
];

    for (var fighter of fighters) {
        listX.innerHTML += `<option value="${fighter.name}">${fighter.name}</option>` ;
        listY.innerHTML += `<option value="${fighter.name}">${fighter.name}</option>` ;
    }

function choose(name) {
  return fighters.filter(function(a, b) {
    return (a.name.toLowerCase() == name.toLowerCase())
  })[0];
}

listX.addEventListener("change",function(){
  if(this.value != "") chosen[0] = choose(this.value)
  FighterX.innerHTML = this.value + " has been chosen";
});

listY.addEventListener("change",function(){
  if(this.value != "") chosen[1] = choose(this.value)
  FighterY.innerHTML = this.value + " has been chosen";
});
<select class="listX">
  <option value=""></option>
</select>

<select class="listY">
  <option value=""></option>
</select>

<div class="FighterX"></div>
<div class="FighterY"></div>

Upvotes: 0

Related Questions