JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="myFunction()">Click Me!</button>


<h2>Fight This Creature</h2>
<p id="name"></p>
<p> AC </p>
<p id="ac"></p>
<p> HP </p>
<p id="hp"></p>

<p id="randomNumber"></p>

JavaScript

var x = Math.floor(Math.random() * 3);


if (x == 0) {
  var goblin = {
    name: "Goblin",
    hp: 10,
    ac: 12,
    cr: 1
  };
  document.getElementById("ac").innerHTML = goblin["ac"];
  document.getElementById("hp").innerHTML = goblin["hp"];
  document.getElementById("name").innerHTML = goblin["name"];
}


if (x == 1) {
  var guard = {
    name: "Guard",
    hp: 15,
    ac: 16,
    cr: 2
  };
  document.getElementById("ac").innerHTML = guard["ac"];
  document.getElementById("hp").innerHTML = guard["hp"];
  document.getElementById("name").innerHTML = guard["name"];
}



if (x == 2) {
  var the_dude = {
    name: "The Dude",
    hp: 100,
    ac: 25,
    cr: 3
  };
  document.getElementById("ac").innerHTML = the_dude["ac"];
  document.getElementById("hp").innerHTML = the_dude["hp"];
  document.getElementById("name").innerHTML = the_dude["name"];
}




//var x = Math.floor(Math.random() * 3);
function myFunction() {

  var x = "goblin"

  //document.getElementById("randomNumber").innerHTML = x;

  if (x == "goblin") {
    var goblin = {
      name: "Goblin",
      hp: 10,
      ac: 12,
      cr: 1
    };
    document.getElementById("ac").innerHTML = goblin["ac"];
    document.getElementById("hp").innerHTML = goblin["hp"];
    document.getElementById("name").innerHTML = goblin["name"];
  }



  if (x == 1) {
    var guard = {
      name: "Guard",
      hp: 15,
      ac: 16,
      cr: 2
    };
    document.getElementById("ac").innerHTML = guard["ac"];
    document.getElementById("hp").innerHTML = guard["hp"];
    document.getElementById("name").innerHTML = guard["name"];
  }



  if (x == 2) {
    var the_dude = {
      name: "The Dude",
      hp: 100,
      ac: 25,
      cr: 3
    };
    document.getElementById("ac").innerHTML = the_dude["ac"];
    document.getElementById("hp").innerHTML = the_dude["hp"];
    document.getElementById("name").innerHTML = the_dude["name"];
  }



}