如何从列表中创建数组

Question

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;
  }
}

Answer 1

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>

Answer 2

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>