so I'm currently making a clicker game With a twist that the only thing that makes you bottles are bottlers, but they are directly upgraded along with the bottle type throughout the game until you can beat it, and here is my code so far. if you run the code you can see that pressing the upgrade button more than once only returns an error, how do I fix this? also if anyone has any tips to improve or shorten the code I'll take that as well as this is my first time coding.
<html>
<head>
<link rel="icon" href="bottle1.png">
<title>Bottle empire</title>
<style>
p.cash {
font-family: "Comic Sans MS", "Comic Sans", cursive;
position: relative;
left: -5px;
}
p.cookie {
font-family: "Comic Sans MS", "Comic Sans", cursive;
position: relative;
top: -300px;
}
</style>
</head>
<center>
<p class="cash">Cash: <span id="score">0</span></p>
</center>
<center><img src="bottle1.png" height="256px" width="256px" onclick="addToScore(1)"></center>
<Center><button onclick="upgrade()">Upgrade bottle [<span id="upgradecost">1000</span>] </button></Center>
<button onclick="buybottler()">Bottler [<span id="bottlercost">10</span>] -- <span id="bottlers">0</span></button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.0/js.cookie.min.js"></script>
<script>
var score = 1000000;
var bottlercost = 10;
var bottlers = 0;
var upgradecost = 1000;
function buybottler() {
if (score >= bottlercost) {
score = score - bottlercost;
bottlers = bottlers + 1;
bottlercost = Math.round(bottlercost * 1.15);
document.getElementById("score").innerHTML = score;
document.getElementById("bottlercost").innerHTML = bottlercost;
document.getElementById("bottlers").innerHTML = bottlers;
document.getElementById("upgradecost").innerHTML = upgradecost
}
}
function upgrade() {
if (score >= upgradecost) {
score = score - upgradecost;
upgrade = upgrade + 1;
upgradecost = upgradecost * 5;
document.getElementById("score").innerHTML = score;
document.getElementById("upgradecost").innerHTML = upgradecost
}
}
function addToScore(amount) {
score = score + amount
document.getElementById("score").innerHTML = score;
}
setInterval(function () {
score = score + bottlers
document.getElementById("score").innerHTML = score;
}, 2000); // 2000 msec = 1 sec
</script>
</body>
</html>