function he() {
  var x = Math.floor((Math.random() * 100) + 1);
  document.getElementById("res1").innerHTML = "Heroes have dealt " + x + " damage on villains.";
  var vhp = villains - x;
  document.getElementById("res2").innerHTML = "<br/>Villains have " + vhp + "  hp left.";
  vok();
}

function vok() {
  var y = Math.floor((Math.random() * 100) + 1);
  document.getElementById("res3").innerHTML = "<br/>Villains have dealt " + y + " damage on Heroes.";
  var hhp = hero - y;
  document.getElementById("res4").innerHTML = "<br/>Heroes have " + hhp + "  hp left.";
  he();
}

Here is the above code I made function he() is called when a button is clicked and vok function is called after execution of he() function but it's not going good currently i want to overwrite the innerHTML every time the function is runned how am I supposed to do so?