Can't keep executing an if statement-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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);

CodePudding user response：

The behavior of a counter can be accomplished using a closure:

Define or declare a Number value outside the function
The counter increments/decrements within the function

In the example below there is only one event listener added to the parent ie <form> of the clickable tags ie <button>. The event handler handles click events for both <button>s. This is possible by event delegation. Also note that the tags and references to the tags have been changed. This is optional, see forms for details.

Details are commented in example below

// This is the <form>
const box = document.forms.box;
/* This counter is a Number value set outside of
// the function
*/
let i = 0;

/* This is the event handler passing the Event 
// Object.
*/
const counter = event => {
  /* This is all <button>, <fieldset>, etc inside
  // <form>
  */
  const io = event.currentTarget.elements;
  // This the <fieldset>
  const cnt = io.cnt;
  // This the <button> the user clicked
  const btn = event.target;
  // if the clicked <button> has #id="inc"...
  if (btn.id === 'inc') {
    //...increase the counter value...
    i  ;
    //...display it in <fieldset>
    cnt.textContent = i;
    // but if the clicked <button> has #id="dec"...
  } else if (btn.id === 'dec') {
    //...decrease the counter value...
    i--;
    //...display it in <fieldset>...
    cnt.textContent = i;
  }
  //...and if the counter happens to be lass than 4...
  if (i < 4) {
    //...disable <button id='dec'>...
    io.dec.disabled = true;
  } else {
    //...otherwise enable it.
    io.dec.disabled = false;
  }
};
/* Add the event listener to the parent ie <form> 
// of the tags that you want to be clickable 
// ie the <button>s
*/
box.addEventListener('click', counter);

body {
  font: bold 2ch/1 Consolas;
}

#box {
  display: flex;
  justify-content: center;
  align-items: center;
}

#cnt {
  width: 50px;
  padding: 0;
  font-size: 2rem;
  text-align: center;
}

button {
  display: inline-block;
  font-size: 2rem;
  border: 0;
  cursor: pointer;
}

<form id='box'>
  <button id="inc" type='button'>⏫</button>
  <fieldset id='cnt'>0</fieldset>
  <button id="dec" type='button' disabled>⏬</button>
</form>