My Dollars Per Second Counter Isn't Working. I have the right id in document.querySelector and the calculations are right. The Dollars per Second just isn't updating It seems the function is not running properly. I don't know what to do at all. I'm not getting any errors in the console either.
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" />
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Computer Clicker</title>
</head>
<body onload="updateDollars()">
<div class="counterclass">
<h1 id="counter">0 dollars</h1>
<h3 id="dps">0.0 dps(Dollars per Second)</h3>
</div>
<div class="clickme">
<img
id="slightlydamagedcomputer"
onclick="clicker.dollars += clicker.clickMultiplier; var click = document.querySelector('.clickme'); click.style.animation = 'click 0.2s'; var clone = click.cloneNode(true); click.parentNode.replaceChild(clone, click);"
src="slightlydamagedcomputer.png"
alt="Drawing of a Smoking Computer"
width="500"
height="500"
/>
</div>
<div class="upgradesleft">
<h1>Upgrades</h1>
<div class="upgradeoptions">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="genright">
<h1>Generators</h1>
<div class="genoptions"></div>
</div>
</body>
</html>
Javascript:
dollars: 0,
clickMultiplier: 1,
generators: {
cardboardMouse: {
amount: 0,
cost: 10,
dps: 0.5,
dollarsToShow: 5,
dollarsToUnlock: 10,
name: "Cardboard Mouse",
description:
"A poorly crafted cardboard version of a mouse. Need I say more?",
},
cardboardKeyboard: {
amount: 0,
cost: 50,
dps: 1,
dollarsToShow: 25,
dollarsToUnlock: 50,
name: "Cardboard Keyboard",
description:
"A poorly crafted cardboard version of a keyboard. Makes a satisfying noise.",
},
},
};
var delay = 0;
function thingClicked(thing) {
if (clicker.generators[thing].cost <= clicker.dollars) {
clicker.dollars -= clicker.generators[thing].cost;
clicker.generators[thing].amount++;
clicker.generators[thing].cost += Math.round(
clicker.generators[thing].cost * 0.15
);
updateGenerators();
/*updateDollarsPerSecond();*/
}
}
function dummyFunction() {
updateDollarsPerSecond();
}
function updateDollarsPerSecond(){
for (i in clicker.generators) {
dummyFunction();
console.log((clicker.generators[i].amount * clicker.generators[i].dps).toFixed(1) + " dps(Dollars per Second)")
document.querySelector("#dps").innerHTML = (clicker.generators[i].amount * clicker.generators[i].dps).toFixed(1) + " dps(Dollars per Second)";
}
}
function updateGenerators() {
document.querySelector(".genoptions").innerHTML = "";
for (i in clicker.generators) {
document.querySelector(
".genoptions"
).innerHTML += `<div><button onclick="thingClicked('${i}');"><h3>${clicker.generators[i].name}(${clicker.generators[i].amount})</h3><p>${clicker.generators[i].description}</p><p class="cost">$${clicker.generators[i].cost}</p><p class="dps">${clicker.generators[i].dps} dps</p></button></div>`;
}
}
function updateDollars() {
if (Cookies.get("clicker") != null && Cookies.get("clicker") != "undefined") {
var clicker1 = JSON.parse(Cookies.get("clicker"));
for (i in clicker.generators) {
if (clicker1.generators[i] == null) {
clicker1.generators[i] = clicker.generators[i];
}
}
clicker = clicker1;
}
updateGenerators();
setInterval(() => {
for (i in clicker.generators) {
clicker.dollars +=
(clicker.generators[i].amount * clicker.generators[i].dps) / 100;
}
if (clicker.dollars != 1) {
document.getElementById("counter").innerHTML =
String(clicker.dollars).split(".")[0] + " dollars";
} else {
document.getElementById("counter").innerHTML =
String(clicker.dollars).split(".")[0] + " dollar";
}
delay++;
if (delay >= 40) {
Cookies.set("clicker", JSON.stringify(clicker), { expires: 100000 });
delay = 0;
}
}, 10);
}
CSS:
@keyframes click {
50% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
body {
background-color: aquamarine;
}
h1,
#dps {
font-family: "Joan", serif;
}
#dps {
font-size: 15px;
}
#counter,
#dps {
text-align: center;
margin: 0px;
margin-top: 21.44px;
}
#slightlydamagedcomputer {
display: block;
margin: auto;
}
#slightlydamagedcomputer:hover {
cursor: pointer;
}
.upgradesleft {
left: 0px;
}
.genright {
right: 0px;
}
.upgradesleft,
.genright {
position: absolute;
top: 0px;
height: 100%;
}
.upgradesleft h1,
.genright h1 {
text-align: center;
}
.upgradeoptions button,
.genoptions button {
background-color: aliceblue;
border-style: solid;
border-color: black;
border-width: 1px;
height: 100px;
width: 400px;
display: block;
}
.upgradeoptions button {
border-radius: 0px 15px 15px 0px;
/*display: none;*/
}
.genoptions button {
border-radius: 15px 0px 0px 15px;
/*display: none;*/
}
.upgradeoptions div,
.genoptions div {
position: relative;
}
.cost {
left: 0px;
top: 0px;
border-radius: 15px;
}
.dps {
right: 0px;
top: 0px;
border-radius: 0px 0px 0px 15px;
}
.cost,
.dps {
background-color: lightgray;
border-style: solid;
border-color: black;
border-width: 1px;
position: absolute;
margin: 0px;
padding: 5px;
}
