CODEWITHSUNDEEP
javascriptcsshtml
indora_no_ya
indora_no_ya

Reputation: 55

How to get / change value of HTML5 progress bar?

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>

Upvotes: 4

Views: 22922

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

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>

Upvotes: 10

Related Questions