I’m making a clicker game but one of my images (for an upgrade) won’t work when I click it. The problem is in the helper div image.
I’m using HTML , css, javascript and jQuery for js
Code:
var clicks = 0;
var perclick = 1;
var persec = 0;
var costup1 = 12;
var currentup1 = 0;
var costup2 = 27;
var currentup2 = 0;
setInterval(sec, 1000)
//click and upgrade
$(document).ready(function() {
$("#sun").click(function() {
add()
})
$("#up1").click(function() {
if (clicks >= costup1) {
clicks = clicks - costup1
currentup1 = currentup1 + 1;
costup1 = ((currentup1 + 1) * 12);
perclick = perclick + 1
update()
} else {
alert("You Don't Have Enough Clicks");
}
})
$("#up2").click(function() {
if (click >= currentup2) {
clicks = clicks - costup2
currentup2 = currentup2 + 1;
costup2 = ((currentup2 + 1) * 27)
persec = persec + 1;
update()
} else {
alert("You Don't Have Enough Clicks")
}
})
//Save and load
$(document).ready(function() {
$("#save").click(function() {
localStorage.setItem("clicks", clicks)
localStorage.setItem("perclick", perclick)
localStorage.setItem("persec", persec)
localStorage.setItem("currentup1", currentup1)
})
$("#load").click(function() {
clicks = localStorage.getItem("clicks")
clicks = parseInt(clicks)
perclick = localStorage.getItem("perclick")
perclick = parseInt(perclick)
persec = localStorage.getItem("persec")
persec = parseInt(persec)
currentup1 = localStorage.getItem("currentup1")
currentup1 = parseInt(currentup1)
})
})
})
function add() {
clicks = clicks + perclick;
update()
}
function sec() {
clicks = clicks + persec;
update()
}
function update() {
document.getElementById("costmag").innerHTML = ((currentup1 + 1) * 12) + " Clicks";
document.getElementById("curmag").innerHTML = "You Own " + currentup1 + " Magnifying Glasses(+1 Clicks Per Click)"
document.getElementById("scoreText").innerHTML = clicks + " Clicks";
document.getElementById("clickText").innerHTML = "You Are Gaining " + perclick + " Clicks Per Click"
document.getElementById("secText").innerHTML = "You Are Gaining " + persec + " Clicks Per Second"
document.getElementById("helpcur").innerHTML = "You Have " + currentup2 + " Helpers(+1 Clicks Per Second)"
document.getElementById("helpcos").innerHTML = ((currentup2 + 1) * 27) + " Clicks";
}img {
-webkit-user-drag: none;
}
button {
box-sizing: border-box;
background-color: #000000;
color: cyan;
border: none;
font-size: 16px;
}
body {
font-family: Architects Daughter;
}
```<!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 Game Made With jQuery</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p id="clickText"> You Are Gaining 1 Clicks Per Click </p>
<p id="secText"> You Are Gaining 0 Clicks Per Second </p>
<a href="javascript:;"><img src="Images/sun.png" id="sun"></a>
<p id="scoreText">0 Clicks</p>
<div class="magnify">
<p id="curmag"> You Own 0 Magnifying Glasses(+1 Clicks Per Click)</p>
<a href="javascript:;"><img src="Images/magnify-glass.png" width="50px" height="50px" id="up1"></a>
<p id="costmag"> 12 Clicks </p>
</div>
<div class="helper">
<p id="helpcur"> You Have 0 Helpers (+1 Clicks Per Second)</p>
<a href="javascript:;"><img src="Images/helper.png" width="60px" height="80px" id="up2"></a>
<p id="helpcos"> 27 Clicks </p>
</div>
<div class="svld">
<button id="save">Save</button>
<button id="load">Load</button>
</div>
</body>
</html>