I am trying to make a clicker game, so when you buy things, it brings your points down while also making the points go up every second. My problem is that when you buy the upgrade, it brings it down by 15 points, but when the auto thing brings my points up by only one, it goes back to 15 or higher. Here is my code so far:
var i = 0;
num = document.getElementById('number');
function Add() {
i++;
num.innerText = i;
}
function AutoThing() {
document.getElementById("number").innerHTML = i - 15;
setInterval(increase, 1000)
}
function increase() {
if (i > 0) {
i++;
num.innerText = i;
}
}
<center>
<p id="number">0</p>
<br>
<button onclick="Add()">Add 1</button>
<br>
<button onclick="AutoThing()">auto clicker 15$</button>
</center>
You could simplify what you have by making add take a number to add to i.
var i = 0;
function add(amount) {
i += amount;
document.getElementById('number').innerText = i;
}
function autoThing() {
add(-15);
}
setInterval(() => add(1), 1000)
<!doctype html>
<html>
<body>
<center>
<p id="number">
0
</p>
<br>
<button onclick="add(1)">
Add 1
</button>
<br>
<button onclick="autoThing()">
auto clicker 15$
</button>
</center>
</body>
</html>
There are multiple situations:
var i = 0;
num = document.getElementById('number');
function add() {
i++;
num.innerText = i;
}
function autoThing() {
if (i <= 15) {
return;
}
i-=15;
document.getElementById("number").innerHTML = i;
}
function increase() {
if (i > 0) {
i++;
num.innerText = i;
}
}
setInterval(increase, 1000)
<!dotype html>
<html>
<body>
<center>
<p id="number">
0
</p>
<br>
<button onclick="add()">
Add 1
</button>
<br>
<button onclick="autoThing()">
auto clicker 15$
</button>
</center>
</body>
</html>