My code seems to interpret that I click twice, but when I lower the num in the function CookieClick() it gives zero…
let num = 0;
let upgrade = 1;
let noCookiesCheck = 0;
let isThereNoCookies = false;
let mouseupgrade = 0;
let autoClickInterval = 1000; // Interval in milliseconds
let upgradeInflation = 1;
function checker() {
document.getElementById("cookieCount").innerHTML = num;
document.getElementById("grandma").innerHTML = upgrade - 1;
if (isThereNoCookies && noCookiesCheck >= 1) {
document.getElementById("noCookies").innerHTML = " Not enough Cookies!";
noCookiesCheck -= 20;
} else {
document.getElementById("noCookies").innerHTML = ""; // Clear the message
isThereNoCookies = false; // Reset the flag
}
document.getElementById("inflationCase").innerHTML = Math.floor(20 * upgradeInflation);
}
function cookieClick() {
num += upgrade;
}
function darker() {
var body = document.body;
var cookies = document.getElementsByClassName("cookie");
for (var i = 0; i < cookies.length; i++) {
cookies[i].style.backgroundColor = "#390100";
}
body.style.backgroundColor = "#3b53ff";
}
function b1() {
const cost = Math.floor(20 * upgradeInflation);
if (num >= cost) {
num -= cost;
upgrade += 1;
upgradeInflation += 0.15;
} else {
noCookiesCheck = 5000; // Set a longer duration
isThereNoCookies = true;
}
}
function b2() {
const cost = 10; // Fixed cost for auto-click
if (num >= cost) {
num -= cost;
mouseupgrade += 1;
document.getElementById("mouseclick").innerHTML = mouseupgrade;
} else {
noCookiesCheck = 5000; // Set a longer duration
isThereNoCookies = true;
}
}
// Auto increment cookies based on mouseupgrade
function autoCookieClick() {
if (mouseupgrade > 0) {
num += mouseupgrade;
}
}
// Call checker() every 100 milliseconds
setInterval(checker, 100);
// Call autoCookieClick() every second
setInterval(autoCookieClick, autoClickInterval);
// Adding event listeners
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".darkMode").addEventListener("click", darker);
document.getElementById("b1").addEventListener("click", b1);
document.getElementById("b2").addEventListener("click", b2);
document.querySelector(".cookie").addEventListener("click", cookieClick);
});
body {
background-color: rgb(0, 110, 255);
font-family: "Ubuntu", sans-serif;
}
body,
.cookie {
transition: background-color 0.5s ease;
}
.counter {
background-color: rgb(55, 96, 185);
font-family: "Ubuntu", sans-serif;
border-radius: 10%;
height: 100px;
width: 300px;
text-align: center;
position: fixed;
top: 10px;
left: 40%;
}
.darkMode {
background-color: gray;
border-radius: 20%;
height: 100px;
width: 100px;
text-align: center;
position: fixed;
top: 110px;
left: 10px;
}
.cookie {
background-color: brown;
border-radius: 50%;
height: 500px;
/* Set a fixed height */
width: 500px;
/* Set the same width to make it a circle */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Center the element */
}
.buttonConcept,
#b1,
#b2,
#b3 {
background-color: blue;
color: aliceblue;
height: 200px;
border-radius: 10px;
width: 300px;
}
#b1 {
position: fixed;
top: 10px;
right: 10px;
}
#b2 {
position: fixed;
top: 210px;
right: 10px;
}
<div class="counter">Cookies: <span id="cookieCount">0</span></div>
<div class="darkMode" onclick="darker()">Dark Mode Button:</div>
<div id="b1" onclick="b1()">(<span id="inflationCase">20</span> cookies for) Grandmas: <span id="grandma">0</span><span id="noCookies"></span></div>
<div id="b2" onclick="b2()">Auto Clicks: <span id="mouseclick">0</span></div>
<div class="cookie" onclick="cookieClick()"></div>
I have tried to lower the num integer but it gives 0.
I have tried to lower the upgrate int too but still 0.
2
Answers
It happens when you use the upgrade variable, which is initially set to 1.
In the cookieClick() function, the line num += upgrade; increments the num variable by the value of upgrade, which is initially 1.
The num variable represents the total number of cookies, and it is displayed in the cookieCount span element through the checker() function.
The issue is caused by having both an onClick attribute and an event listener attached to the cookie element, resulting in the cookieClick() function being triggered twice per click(once by onClick and again by event listener). You can fix this by removing one of them and keeping the other.
For example in HTML remove onClick and keep the rest of the code as is:
After making this change, remember to test the code to verify that the cookies increment by the correct amount each time the cookie element is clicked.