I'm attempting to create a loop that will display information in three different areas of the DOM. Essentially, I have an array of enemies and I want to randomly select three of them to display in separate HTML div classes (firstEnemy, secondEnemy, thirdEnemy). While I know I could manually assign the values like so:
let loadEnemies = document.querySelector(".firstEnemy");
loadEnemies.innerHTML =
'<p>Name: '+randomLowEnemy.name+'</p>' +
'<p>Health: '+randomLowEnemy.health+'</p>'
repeating this process multiple times would be cumbersome, which is why I'm trying to implement a loop to automate it for me. Currently, I am able to select an enemy and display its information using:
let enemy;
function Enemy(rank, name, img, health, attack, speed){
this.rank = rank;
this.name = name;
this.img = img;
this.health = health;
this.attack = attack;
this.speed = speed;
};
//Ranks are E, C, D, B, A, S with corresponding numbers 1-6
let goblin = new Enemy(1,"Goblin", 50, 5, 10);
let centipede = new Enemy(2 ,"Giant Desert Centipede", 100, 15, 5);
let jackal = new Enemy(2, "Dungeon Jackal", 75, 10, 15);
const lowRankEnemies = [ goblin, centipede, jackal];
let randomLowEnemy = lowRankEnemies[Math.floor(Math.random() * lowRankEnemies.length)];
console.log(randomLowEnemy);
let loadLowEnemies = 3;
for(let i =0; i < loadLowEnemies; i++){
let loadEnemies = document.querySelector(".firstEnemy");
loadEnemies.innerHTML =
'<p>Name: '+randomLowEnemy.name+'</p>' +
'<p>Health: '+randomLowEnemy.health+'</p>'
}