如何获取/更改HTML5进度条的值？

Question

以下是我在进度栏中使用的html和js：但是我的控制台告诉我，变量dragonHealth的null在初始化时应为100时为null 。 根据我的发现，该值应该是浮点变量，那么为什么它会显示为null ？ 不太熟悉此progress标签。 谢谢您的帮助。 顺便说一句，我的CSS中的运行状况ID只是一个空白，仅用于在js中引用它。

JS

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

html

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

Answer 1

确保在DOM准备就绪后（ 或在页面末尾 ）运行JS。

 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>