如何获取/更改 HTML5 进度条的值? [英] How to get / change value of HTML5 progress bar?

问题描述

下面是我的进度条的 html 和 js:但是我的控制台告诉我变量 dragonHealth 的值是 null，而它在初始化时应该是 100.根据我的发现，该值应该是一个浮点变量，那么为什么它会以 null 的形式出现?对这个 progress 标签不太熟悉.谢谢您的帮助.顺便说一句，我的 css 中的健康 ID 只是一个空白的，只是为了在 js 中引用它而创建的.

Below is the html and js I have for my progress bar: But my console is telling me the value of the variable dragonHealth is null when it should be 100 as initialized. From what I have found, the value should be a floating point variable so why is it coming out as null? Not too familiar with this progress tag btw. Thanks for the help. Btw, the health ID in my css is just a blank one created just to reference it in js.

JS

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

html

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

推荐答案

确保 JS 在 DOM 就绪后(或页面末尾)运行

Make sure the JS is run after the DOM is ready (or at the end of the page)

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>

这篇关于如何获取/更改 HTML5 进度条的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！