如何在pointerdown和pointerup上增加和減少進度條值？

Question

目前，我正在嘗試為游戲編寫代碼，當指針向下時，進度標簽會隨着時間的推移慢慢耗盡，而在指針向上時，進度條會從它停止的值慢慢重新填充。

這是我目前的工作邏輯：

HTML：

<progress id="air" max="100" value="100"></progress>

Javascript：

// Javascript
var air = document.querySelector('#air').value;

function drowning(){
  if (air <= 0){
    console.log("You have drowned");
  } else {
    air--;
  }
};

addEventListener('pointerdown', function() {
  var losingair = setInterval(drowning, 250);            
});

addEventListener('pointerup', function() {
  clearInterval(drowning);
  setInterval(gainingair, 200);
  function gainingair() {
    if (air = 100) {
      clearInterval(gainingair); 
    }
    else {
      air++; 
    }
  }
});   

Answer 1

不要將document.querySelector('#air').value分配給air變量，而是僅分配document.querySelector('#air')部分。 並使用air.value來訪問該值。

此外，您正在以錯誤的方式清除間隔。 setInterval()返回的值用作 clearInterval() 方法的參數。

這是工作代碼

 var air = document.querySelector('#air'); var losingairInterval, gainingairInterval function drowning() { if (air.value <= 0) { console.log("You have drowned"); clearInterval(losingairInterval); } else { air.value--; } } function gainingair() { if (air.value == 100) { clearInterval(gainingairInterval); } else { air.value++; } } addEventListener('pointerdown', function() { clearInterval(gainingairInterval); losingairInterval = setInterval(drowning, 250); }); addEventListener('pointerup', function() { clearInterval(losingairInterval); gainingairInterval = setInterval(gainingair, 200); }); dispatchEvent(new CustomEvent('pointerdown'))

 <progress id="air" max="100" value="100"></progress>