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 h

Solution 1:

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>