Allow button click whilst do loop is true

Question

I created a little RPG at the request of my 8 year old in order to learn javascript and teach her a bit too. It's taken a while (be gentle with my code!) and it's fairly simple but it works well enough by assigning a random enemy for you to fight and then doing a simple combat sequence (round 1, round 2, round 3 etc.) until you or the enemy is dead (runs in a do while loop).

What I'd like to do is have each round activated by a 'FIGHT!' button, providing you or the enemy have > 0 health. I've fiddled around with the code but can't seem to get it to wait between rounds for the button to be pressed - it just runs through each round in one go (as I'd expect it to!).

<h1><b>Halloween RPG Battle</b></h1>
<script>
var enemy = [{
    name: 'Wizard',
    health: 10,
    weapon: 'his staff.',
    damage: 12,
    dodge: 10,
    backpack: 'Cloak of Invisibility.'
  },
  {
    name: 'Elf',
    health: 4,
    weapon: 'a dagger.',
    damage: 6,
    dodge: 8,
    backpack: 'Bow & Arrow.'
  },
  {
    name: 'Dragon',
    health: 20,
    weapon: 'a fireball.',
    damage: 15,
    dodge: 2,
    backpack: ''
  },
  {
    name: 'Goblin',
    health: 12,
    weapon: 'his bow and arrow.',
    damage: 4,
    dodge: 6,
    backpack: 'gold coins.'
  },
  {
    name: 'Dwarf',
    health: 7,
    weapon: 'his axe.',
    damage: 5,
    dodge: 4,
    backpack: 'map'
  },
  {
    name: 'Orc',
    health: 8,
    weapon: 'a sword.',
    damage: 5,
    dodge: 5,
    backpack: 'silver tooth.'
  },
  {
    name: 'Witch',
    health: 6,
    weapon: 'her potion of the undead.',
    damage: 7,
    dodge: 6,
    backpack: 'potion of the living.'
  },
  {
    name: 'Old Lady',
    health: 3,
    weapon: 'her frying pan.',
    damage: 1,
    dodge: 1,
    backpack: 'fruit and vegetables.'
  },
  {
    name: 'Villagers',
    health: 15,
    weapon: 'sharpened sticks.',
    damage: 5,
    dodge: 1,
    backpack: 'meat.'
  },
  {
    name: 'Thief',
    health: 4,
    weapon: 'his fists.',
    damage: 3,
    dodge: 9,
    backpack: 'jewels.'
  }
];

var hero = [{
  name: 'Mary',
  health: 15,
  weapon: 'sword',
  damage: 6,
  dodge: 8,
  backpack: ''
}];


function battle() {
  var x = 1;
  var randomEnemy = enemy[Math.floor(Math.random() * enemy.length)];


  do {
    var enemyDamage = Math.floor((Math.random() * (randomEnemy.damage)) + 1);
    var enemyDodge = Math.floor((Math.random() * (randomEnemy.dodge)) + 1);
    var randomNumber = Math.floor(Math.random() * 4) + 1;
    var heroDodge = [Math.floor(Math.random() * hero[0].dodge)];
    var heroDamage = Math.floor((Math.random() * hero[0].damage) + 1);


    document.write("<br>" + "<b>" + "Round " + x++ + "</b>");
    document.write("<br>" + "The " + randomEnemy.name + " attacks you with " + randomEnemy.weapon);
    if (randomNumber < heroDodge) {
      document.write("<br>" + "You evade the attack!");
    } else if (hero[0].health > 0) {
      hero[0].health = hero[0].health - enemyDamage;
      document.write("<br>" + "The " + randomEnemy.name + " did " + enemyDamage + " damage");
      document.write("<br>" + "You have " + hero[0].health + " health remaining.");
    }
    if (hero[0].health <= 0) {
      document.write("<br>" + "You have been killed by the " + randomEnemy.name);
      break;
    } else {
      document.write("<br>" + "Mary attacks the " + randomEnemy.name + " with her sword.");
    }
    if (randomNumber < enemyDodge) {
      document.write("<br>" + "The " + randomEnemy.name + " evades the attack!");
    } else if (randomEnemy.health > 0) {
      randomEnemy.health = randomEnemy.health - heroDamage;
      document.write("<br>" + "Mary did " + heroDamage + " damage");
      document.write("<br>" + "The " + randomEnemy.name + " has " + randomEnemy.health + " health");
    }
    if (randomEnemy.health <= 0) {
      document.write("<br>" + "The " + randomEnemy.name + " is dead!");
      break;
    } else {
      continue;
    }
  }
  while (hero[0].health > 0 || randomEnemy.health > 0);

}

battle()
</script>

Answer 1

Here is my solution. You need to remove the do/while loop and set the randomEnemy outside of your battle method.

To keep the fight button after a Round has completed, I put the content of the round in a container element that is before your button "fight".

const container = document.getElementById("container");


var hero = [{
  name: 'Mary',
  health: 15,
  weapon: 'sword',
  damage: 6,
  dodge: 8,
  backpack: ''
}];

var randomEnemy = null;
var x = 1;

function pickNextEnemy(){
  randomEnemy = enemy[Math.floor(Math.random() * enemy.length)];
}

function battle() {

  if(hero[0].health <= 0 || randomEnemy.health <= 0){
    console.log("can't continue, someone has died");
    return;
  };

  var enemyDamage = Math.floor((Math.random() * (randomEnemy.damage)) + 1);
  var enemyDodge = Math.floor((Math.random() * (randomEnemy.dodge)) + 1);
  var randomNumber = Math.floor(Math.random() * 4) + 1;
  var heroDodge = [Math.floor(Math.random() * hero[0].dodge)];
  var heroDamage = Math.floor((Math.random() * hero[0].damage) + 1);


  container.innerHTML += ("<br>" + "<b>" + "Round " + x++ + "</b>");
  container.innerHTML += ("<br>" + "The " + randomEnemy.name + " attacks you with " + randomEnemy.weapon);
  if (randomNumber < heroDodge) {
    container.innerHTML += ("<br>" + "You evade the attack!");
  } else if (hero[0].health > 0) {
    hero[0].health = hero[0].health - enemyDamage;
    container.innerHTML += ("<br>" + "The " + randomEnemy.name + " did " + enemyDamage + " damage");
    container.innerHTML += ("<br>" + "You have " + hero[0].health + " health remaining.");
  }
  if (hero[0].health <= 0) {
    container.innerHTML += ("<br>" + "You have been killed by the " + randomEnemy.name);
    return;
  } else {
    container.innerHTML += ("<br>" + "Mary attacks the " + randomEnemy.name + " with her sword.");
  }
  if (randomNumber < enemyDodge) {
    container.innerHTML += ("<br>" + "The " + randomEnemy.name + " evades the attack!");
  } else if (randomEnemy.health > 0) {
    randomEnemy.health = randomEnemy.health - heroDamage;
    container.innerHTML += ("<br>" + "Mary did " + heroDamage + " damage");
    container.innerHTML += ("<br>" + "The " + randomEnemy.name + " has " + randomEnemy.health + " health");
  }
  if (randomEnemy.health <= 0) {
    container.innerHTML += ("<br>" + "The " + randomEnemy.name + " is dead!");
  }
}

pickNextEnemy();
battle()
document.getElementById("fight").addEventListener("click", battle);

<div id="container">

</div>
<button id="fight">Fight!</button>

<script>
  var enemy = [{
      name: 'Wizard',
      health: 10,
      weapon: 'his staff.',
      damage: 12,
      dodge: 10,
      backpack: 'Cloak of Invisibility.'
    },
    {
      name: 'Elf',
      health: 4,
      weapon: 'a dagger.',
      damage: 6,
      dodge: 8,
      backpack: 'Bow & Arrow.'
    },
    {
      name: 'Dragon',
      health: 20,
      weapon: 'a fireball.',
      damage: 15,
      dodge: 2,
      backpack: ''
    },
    {
      name: 'Goblin',
      health: 12,
      weapon: 'his bow and arrow.',
      damage: 4,
      dodge: 6,
      backpack: 'gold coins.'
    },
    {
      name: 'Dwarf',
      health: 7,
      weapon: 'his axe.',
      damage: 5,
      dodge: 4,
      backpack: 'map'
    },
    {
      name: 'Orc',
      health: 8,
      weapon: 'a sword.',
      damage: 5,
      dodge: 5,
      backpack: 'silver tooth.'
    },
    {
      name: 'Witch',
      health: 6,
      weapon: 'her potion of the undead.',
      damage: 7,
      dodge: 6,
      backpack: 'potion of the living.'
    },
    {
      name: 'Old Lady',
      health: 3,
      weapon: 'her frying pan.',
      damage: 1,
      dodge: 1,
      backpack: 'fruit and vegetables.'
    },
    {
      name: 'Villagers',
      health: 15,
      weapon: 'sharpened sticks.',
      damage: 5,
      dodge: 1,
      backpack: 'meat.'
    },
    {
      name: 'Thief',
      health: 4,
      weapon: 'his fists.',
      damage: 3,
      dodge: 9,
      backpack: 'jewels.'
    }
  ];
</script>