Im trying to make a basic clicker game on JS. But theres a problem.
I tried to make a 2x clicker thing which is the game will ask you if you wanna buy 2x clicker when you reached to 100 clicks. 2x clicks will basically give you 2x clicks.
However i think it broked the entire code since click button is not giving any clicks.
Heres the codes:
JS:
let clickCount = 0;
let clickBoost = false;
document.getElementById("clickButton").onclick = function(){
clickCount +=1;
document.getElementById("clickCounter").innerHTML = clickCount;
if (clickCount += 100){
let boostyorn = prompt("You have more clicks than 100." + "n" + "n" + "Do you wanna buy 2x Clicks?" + "n" + "(Y/N)")
if (boostyorn == "Y"){
document.getElementById("clickCounter").innerHTML = clickCount - 100;
clickBoost = true;
}
else{
alert("You didn't bought 2x Clicks.")
}
}
if (clickBoost == true) {
document.getElementById("clickButton").onclick = function () {
clickCount += 2;
document.getElementById("clickCounter").innerHTML = clickCount;
}
}
}
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.0">
<title>Clicker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<label id= "clickCounter">0</label><br>
<center><button id= "clickButton">Click</button></center>
<label id= "clickBoost"
<script src="index.js"></script>
</body>
</html>
CSS:
#clickCounter{
display: block;
text-align: center;
font-size: 150px;
}
#clickButton{
display: block;
text-align: center;
font-size: 100px;
}