I am making a Javascript game, where I want the button sleep disappear if the fish number is lower than 4. I have already set up an if statement, but it seems to only work once after the number is lower than 4. Is there any way to keep this if statement executing over and over?
(You can increase the number by clicking the button catchFish. You can decrease the number by clicking sleep. )
let fishNum = document.getElementById("fishNum");
let sleep = document.getElementById("Btn2");
function addFish() {
fishNum.innerHTML++;
if (fishNum.innerHTML > 4) {
sleep.disabled = false;
}
}
document.getElementById("Btn1").addEventListener("click", addFish);
function loseFish() {
fishNum.innerHTML--;
if (fishNum.innerHTML <= 4) {
sleep.style.opacity = "0";
sleep.style.pointerEvents = "none";
}
}
document.getElementById("Btn2").addEventListener("click", loseFish);<span id=fishNum>0</span>
<button id="Btn1">catchFish</button>
<button id="Btn2" disabled="true">sleep</button>let fishNum = document.getElementById("fishNum");
let sleep = document.getElementById("Btn2");
function addFish() {
fishNum.innerHTML++;
if (fishNum.innerHTML > 4) {
sleep.disabled = false;
}
}
document.getElementById("Btn1").addEventListener("click", addFish);
function loseFish() {
fishNum.innerHTML--;
if (fishNum.innerHTML <= 4) {
//sleep.style.opacity = "0";
sleep.disabled = true;
//sleep.style.pointerEvents = "none";
}
}
document.getElementById("Btn2").addEventListener("click", loseFish);<span id=fishNum>0</span>
<button id="Btn1">catchFish</button>
<button id="Btn2" disabled="true">sleep</button>You should make the action of disabling the button to be the exact opposite of enabling it. Currently you use different effects which are not eachother's opposite, and so it does not work as you want.
So decide either to use the disable property in both listeners, or to use opacity in both listeners. It must be consistent.
So here it is how you could do it with disable. I would suggest to bring similar code together into one function:
let fishNum = document.getElementById("fishNum");
let sleep = document.getElementById("Btn2");
function adjustFish(diff) {
fishNum.innerHTML = +fishNum.innerHTML + diff;
sleep.disabled = +fishNum.innerHTML <= 4;
}
document.getElementById("Btn1").addEventListener("click", () => adjustFish(1));
document.getElementById("Btn2").addEventListener("click", () => adjustFish(-1));<span id=fishNum>0</span>
<button id="Btn1">catchFish</button>
<button id="Btn2" disabled="true">sleep</button>to repeat a condition you may use while/do while loops. and as @trincot said decide what exactly you want. disable? disappear? remove? or whatever. just stick to your decision
let fishNum = document.getElementById("fishNum");
let sleep = document.getElementById("Btn2");
function addFish() {
fishNum.innerHTML++;
if (fishNum.innerHTML > 4) {
sleep.disabled = false;
} else {
sleep.disabled = true;
}
}
document.getElementById("Btn1").addEventListener("click", addFish);
function loseFish() {
do {
fishNum.innerHTML--;
sleep.style.opacity = "0";
//sleep.style.pointerEvents = "none";
} while (fishNum.innerHTML > 4);
if (fishNum.innerHTML <= 4) {
sleep.disabled = !sleep.disabled;
sleep.style.opacity = "100%";
}
}
document.getElementById("Btn2").addEventListener("click", loseFish);