Code:
JS:
var balance = 10
var corn_price = 1
var land_cost = 10
var land_power = 1
var cps = 0
var land = 0
var marketing_cost = 50
var dps = 0
setInterval(GUIupdate(), 50)
setInterval(updateBalance(), 1000)
function GUIupdate(){
document.getElementById("balance").innerHTML = "Balance: $" + balance
document.getElementById("dps").innerHTML = "$/sec: " + cps
document.getElementById("land").innerHTML = "Land: " + land + " (Cost: $" + land_cost + ")"
document.getElementById("land_power").innerHTML = "Each land produces " + land_power + " corn per second"
document.getElementById("cps").innerHTML = "Corn/sec: " + cps
document.getElementById("dpc").innerHTML = "Corn price: $" + corn_price
document.getElementById("dpc_upgrade").innerHTML = "Marketing: Increase demand to increase the price of corn by $0.25 (Cost: " + marketing_cost + ")"
}
function updateBalance(){
balance += dps
}
function buyLand(){
if (balance >= land_cost){
balance -= land_cost
land += 1
land_cost = Math.floor(land_cost*1.5)
cps = land*land_power
dps = cps*corn_price
}
}
function buyMarketing(){
if (balance >= marketing_cost){
balance -= marketing_cost
marketing_cost *= 1.5
corn_price += 0.25
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="balance">Balance: $0</div>
<div id="dps">$/sec: 0</div>
</br>
<div id="land">Land: 0 (Cost: $10)</div>
<div id="land_power">Each land produces 1 corn per second</div>
<button onclick=buyLand()>Buy Land</button>
<div id="cps">Corn/sec: 0</div>
</br>
<div id="dpc">Corn price: $1</div>
<div id="dpc_upgrade">Marketing: Increase demand to increase the price of corn by $0.25</div>
<button onclick=buyMarketing()>Buy Marketing</button>
</body>
<script src="script.js"></script>
</html>
When I click on the “Buy Land” button, it needs to show the changed balance, land count, etc. When I looked at the values of the variables using console, I can see that the values have, indeed, changed, meaning that the buyLand() function is working fine. However, the GUI didn’t update.
I tried using the console to run updateGUI to see if that is the problem, but when I run it, the expected outcome is coming – the values that are expected to change have changed. However I also noticed one more problem – my balance is not increasing by $1 per second like it is supposed to. I used the console to check the variables once again – the balance variable is not actually changing, meaning that the updateBalance() function is not running every second like I intended it to. I ran the updateBalance() and updateGUI() using console, and yeah, the balance does increase by $1.
Both of these problems have the same issue – the setInterval() recursion is not working.
I tried looking in this website to see if my syntax is wrong for the setInterval function and it seems to be correct. I’ve seen people answer by saying that the syntax is window.setInterval(function, time in milliseconds) and some answers that just said that setInterval(function, time in milliseconds) – I tried both with neither of them working.