Why does the function not work when the bar value is zero

Question

function function1() {
document.getElementById("progress1");
progress1.value -= 25
}

function gameOver() {
if (document.getElementById("progress1").getAttribute("value") === 0) {
alert("GameOver")
}else {
}
}

gameOver();

<button onclick="function1()" id="button1">Click Me !</button>
<progress id="progress1" value="50" max="100"></progress>

I want to run the gameOver function when the bar value is 0 but it doesn't respond

You need to call `gameOver()` in `function1()` as well, also the `.getAttribute()` returns string, so you might want to check for `"0"` instead of `0`. — norbitrial, Mar 29 '20 at 11:16

score 1 · Accepted Answer · answered Mar 29 '20 at 11:22

function function1() {
  document.getElementById("progress1");
  progress1.value -= 25

  if (progress1.value === 0) {
    alert("GameOver")
  } else {}
}

<button onclick="function1()" id="button1">Click Me !</button>
<progress id="progress1" value="50" max="100"></progress>

score 0 · Answer 2 · answered Mar 29 '20 at 11:32

Firstly it would be better if you can give your functions a meaningful name so you can understand what it does when your code gets bigger.

Your click event you are calling the function to decrease the progress so that click is an event you should put what will happen next after that event occurs in the event function.

The code block in the below is checking if progress decreased to 0 after the event so we can do some process when its reached to zero in here.

function decreaseProgress() {
  const progress = document.getElementById("progress1");
  progress.value -= 25;
  if(progress.value <= 0){
     alert("Game Over");
  }
}

Why does the function not work when the bar value is zero

2 Answers2