Loot Box Clicker

by wizviper

HTML

<h1 id='header'>Loot Box Clicker:Pay To Play</h1>
<p id='lootboxcounter'>You have 1 loot box.</p>
<button id='openlootbox'>Open</button>
<p id='buylootboxtext'>Buy loot box for 100 gold</p>
<button id='buylootbox'>Buy</button>
<p id='goldcounter'></p>
<p id='loottext1'></p>
<p id='loottext2'></p>
<p id='loottext3'></p>
<p id='loottext4'></p>

CSS

#lootboxcounter {
  display: inline;
}
#buylootboxtext {
  display: inline;
  margin-left: 5%;
}

JavaScript

var boxes = 1;
var gold = 100;
var commons = 0;
var uncommons = 0;
var rares = 0;
var legendaries = 0;

document.getElementById('openlootbox').addEventListener('click', openbox);
document.getElementById('buylootbox').addEventListener('click', buybox);


function openbox() {
  if (boxes > 0) {
    boxes--;
    document.getElementById('lootboxcounter').innerHTML = 'You have ' + boxes + ' loot boxes.'
    giveloot();
  }
}

function buybox() {
if(gold >= 100) {
boxes++;
document.getElementById('lootboxcounter').innerHTML = 'You have ' + boxes + ' loot boxes.'
  }
}

function giveloot() {
  var lootarray = [, , , ];
  for (i = 0; i < 4; i++) {
    var rng = Math.floor(Math.random() * 100) + 1;
    var rng2 = Math.floor(Math.random() * 100) + 1;
    if (rng <= 50) {
      commons++;
      lootarray[i] = "Common Hat";

    } else if (rng <= 80) {
      uncommons++;
      lootarray[i] = "Uncommon Hat";

    } else if (rng <= 99) {
      rares++;
      lootarray[i] = "Rare Hat";
    } else {
      legendaries++;
      lootarray[i] = "Legendary Hat";
    }
  }
  document.getElementById("loottext1").innerHTML = "You got: " + lootarray[0];
  document.getElementById("loottext2").innerHTML = lootarray[1];
  document.getElementById("loottext3").innerHTML = lootarray[2];
  document.getElementById("loottext4").innerHTML = lootarray[3];
}