HTML5プログレスバーの値を取得/変更する方法は？

Question

以下は私の進行状況バーのhtmlとjsです： しかし、私のコンソールは変数dragonHealthの値がnullであり、初期化時に100になるはずです。私が見つけたものから、値は浮動小数点変数でなければなりません。なぜそれがnullとして出てくるのですか？このprogressタグbtwにはあまり慣れていません。助けてくれてありがとう。 Btw、私のCSSの健康IDはちょうどjsでそれを参照するために作成された空白のものです。

JS

var dragonHealth = document.getElementById("health").value; 

HTML

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

Answer 1

は

document.addEventListener("DOMContentLoaded", function(event) { 
 
    /* DOM is ready, so we can query for its elements */ 
 
    var dragonHealth = document.getElementById("health").value; 
 
    console.log(dragonHealth); 
 
    
 
    /*additional code for comment*/ 
 
    document.querySelector('button').addEventListener("click", function(event){ 
 
    document.getElementById("health").value += 5; 
 
    }); 
 
})

<progress id="health" value="60" max="100"></progress> 
 
<button>change progress value</button>

DOMは（ またはページの終わりに）準備ができていた後JSが実行されていることを確認します