Почему функция не работает, когда значение бара равно нулю

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>

Я хочу запустить функцию gameOver, когда значение бара равно 0, но оно не отвечает

Answer 1

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>

Answer 2

Во-первых, было бы лучше, если бы вы могли дать своим функциям осмысленное имя, чтобы вы могли понять, что происходит, когда ваш код становится больше.

Ваше событие щелчка, которое вы вызываете функцией, чтобы уменьшить прогресс, поэтому щелчок - это событие, которое вы должны указать, что произойдет после того, как это событие произойдет в функции события.

Блок кода в приведенном ниже коде проверяет, снизился ли прогресс до 0 после события, поэтому мы можем выполнить некоторый процесс, когда он достигнет нуля здесь.

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