As a newcomer to programming, I am attempting to develop a basic javascript game.
I have encountered an issue with the window.setInterval function and it seems to be causing everything to malfunction.
I have been following a tutorial at this link and attempted to modify the code while using different variable names. The original code works perfectly, but when I add the final 3 lines of javascript, the entire project becomes unresponsive. Despite spending 30 minutes reviewing the code, I cannot pinpoint the problem.
main.js
var things = 0;
var gen1 = 0;
function thingClick(number) {
things = things + number;
document.getElementById("things").innerHTML = things;
}
function buyGen1() {
var gen1Cost = Math.floor(10 * Math.pow(1.1, gen1));
if(things >= gen1Cost) {
gen1 = gen1 + 1;
things = things - gen1Cost;
document.getElementById('gen1').innerHTML = gen1;
document.getElementById('things').innerHTML = things;
}
var nextCost = Math.floor(10 * Math.pow(1.1, gen1));
document.getElementById('gen1Cost').innerHTML = nextCost;
}
window.setInterval(function) {
thingClick(gen1);
}
index.html
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/main.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<body>
Things: <span id="things">0</span><br><br>
<button onClick="thingClick(1)">Get Things</button><br><br>
<button onClick="buyGen1()">Buy Generator Lvl. 1</button><br><br>
Generators Lvl. 1:<span id="gen1">0</span> | Cost:<span id="gen1Cost">10</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>