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 ing 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>

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 ing 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>

• javascript
• css
• html

• works fine here fiddle.jshell/umbkuzyj . (check the console) – Getter Jetter Commented Apr 20, 2017 at 16:30

1 Answer 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 ment*/
  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>