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

下面是我的进度条html和js：但是我的控制台告诉我变量dragonHealth的值是null，应该是100的初始值。从我发现的结果来看，这个值应该是一个浮点变量，为什么它会以null出现？不太熟悉这个progress标签顺便说一句。谢谢您的帮助。顺便说一句，我的CSS中的健康ID只是创建一个空白的只是在js中引用它。如何获取/更改HTML5进度条的值？

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

HTML

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

来源

2017-04-20 avisaxena33

在这里可以正常工作https://fiddle.jshell.net/umbkuzyj/。（检查控制台） –

确保后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>

来源

2017-04-20 16:31:48

嗨，谢谢，这工作。在一个侧面说明，进度条视觉本身并没有更新，以反映我的战斗模拟的价值变化，但我知道值从后面的if语句改变。我认为这是一个异步问题，但它不会在模拟结束时更新。你知道这里有什么问题吗？ – avisaxena33

@ avisaxena33确保你正在更新元素值，而不仅仅是你存储进度的变量。（*更新答案，例如*）。 –

是的，我是这么做的，我改变了龙健康的价值，但是我也有一行代码设置龙健康的进度条的值，但酒吧仍然没有改变，它只是静态的 – avisaxena33

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

回答

相关问题