I have this problem with a clicker game I have. So basically what I'm trying to make the game do is once the player has gotten 200 points, the player has the ability to unlock or unveil the new clickers. But for some reason even if you have 0 points you can unlock the new clickers. Can someone help me with this? Thanks
Javascript Clicker code:
let totalclicks = 0;
let superclicker1 = document.getElementById("superclicker1")
let pointsEl = document.getElementById("points-el")
function clicker1() {
totalclicks = totalclicks + 5;
pointsEl.textContent = "Total Points: " + totalclicks
}
Javascript unlock new clicker code
function rebirth() {
if (totalclicks >= 200) {
} else if (superclicker1.style.display === "none") {
superclicker1.style.display = "block";
} else if (superclicker1.style.display = "none") {
} else {
alert("Need 200 points to win.")
}
}
Html for the clicker
<p id="points-el">Total Points: </p>
<button onclick="clicker1()">Five Point Per Click </button>
Html for the function that unlocks the next clickers:
<button id="superclicker1" onclick="superclicker10()">Rebirth </button>
I suggest using more representative names for your element variables. It makes your code more readable.
I think you want to call rebirth from the rebirth button.
Your if statement should be nested. "If the total is equal or greater than 200 then toggle the style based on nested condition, otherwise alert the message.
let totalclicks = 0;
const pointsEl = document.getElementById('points-el');
const rebirthEl = document.getElementById('rebirth');
function addFive() {
totalclicks = totalclicks + 5;
pointsEl.textContent = "Total Points: " + totalclicks;
}
function superclicker() {
// Missing code
}
function rebirth() {
if (totalclicks >= 200) {
if (rebirthEl.style.display === 'none') {
rebirthEl.style.display = 'block';
} else {
rebirthEl.style.display = 'none';
}
} else {
console.log("Need 200 points to win.")
}
}<p id="points-el">Total Points: </p>
<button onclick="addFive()">Five Point Per Click</button>
<button id="rebirth" onclick="rebirth()">Rebirth</button>This line is where the problem is
} else if (superclicker1.style.display = "none") {
Single = are used for assignment, not conditional checks. You probably want either == or === for strict type checking.
Since you're using assignment = then that else if statement will always resolve to true. So your logic looks like this:
if (false) {
} else if (false) {
} else if (true) {
// this block will always be triggered
} else {
}
Perhaps you were looking for something like:
if (totalclicks >= 200) {
if (superclicker1.style.display === "none") {
superclicker1.style.display = "block";
} else {
superclicker1.style.display = "none";
}
} else {
alert("Need 200 points to win.")
}