4

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>
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
indora_no_ya
  • 55
  • 1
  • 1
  • 5

1 Answers1

9

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>
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • Hi, thanks, that worked. On a side note, the progress bar visual itself does not update to reflect value changes in my fight simulation yet I know the values are changing from an if statement I have later on. I thought it was a async issue but it doesn't update at the end of the simulation either. Do you know what could be the problem here? – indora_no_ya Apr 20 '17 at 16:57
  • @avisaxena33 make sure you are updating the element value and not just the variable you store the progress. (*updated answer with example*). – Gabriele Petrioli Apr 20 '17 at 17:08
  • Yeah I did that, I'm changing the value of dragonHealth, but then I also have a line of code that sets the value of the progress bar to dragonHealth as well but the bar still doesn't change, it's simply static – indora_no_ya Apr 20 '17 at 17:28
  • can you post a live demo with the problem ? – Gabriele Petrioli Apr 20 '17 at 17:30
  • I can't really post a live demo because of all the css and html thats linked with pictures and stuff so the whole program won't work, but here's the function that's having a problem. https://jsfiddle.net/jezhL835/#&togetherjs=MlS2zaKQby – indora_no_ya Apr 20 '17 at 17:46
  • Bascially what I've done now is, instead of setting drag health to the progress value which is initially 100, i just set the value of the var to 100 straight up and then after every time the draghealth value is changed through the function, I set the value of the actual progress element to the new dragHealth value. Not sure why this isn't updating the bar itself though. – indora_no_ya Apr 20 '17 at 17:48
  • the fiddle works fine if you create a global `dragonHealth` with an initial value and call the function. – Gabriele Petrioli Apr 20 '17 at 18:44