skip to Main Content

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


  1. 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.

    Login or Signup to reply.
  2. 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:

    <div class="cookie"></div>
    

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search