Javascript can't get content of element

Question

I've written code using Javascript to format the following section of a webpage based on the values:

<div class="col-md-auto mx-auto">
        <h3>Average price</h3>
        <p id="avgPrice"></p>
        <br>
        <div>Average change</div>
        <div class="change" id = "avgChange"></div>
      </div>

      <div class="col-md-auto mx-auto">
        <h3>Max price</h3>
        <p id="maxPrice"></p>
        <br>
        <div>Max change</div>
        <div class="change" id="maxChange"></div>
      </div>

(The values for the text within each of the id's are getting pulled from a database, and appear correctly on the webpage when I start the server)

Here is my Javascript to format the HTML based on positive/negative values:

function changeFormatter() {


var elements = document.getElementsByClassName("change");
  for (var i = 0; i < elements.length; i++) {
    var change = elements[i]; //this is where the problem is
    console.log(change);
    if (change > 0) {
      elements[i].innerHTML = "▴ " + change + "%";
      elements[i].classList.add("text-success");
    }
    if (change < 0) {
      elements[i].innerHTML = "▾ " + change + "%";
      elements[i].classList.add("text-danger");
    }
  }
}

This code is being called by the following eventlistener:

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
  getData(); //gets values from database and adds them to HMTL
  changeFormatter();
});

The issue is the line where I'm defining the var change. The output of the console.log on the line below it shows the text I want is there, see image below:

But no matter what I try I cannot get the text contained within this div. I've tried elements[i].value, .textContent, .innerHTML, .innerText, parseFloat(elements[i].innerHTML)... but they all return 'undefined' when I try and log them. I would really appreciate any suggestions!

Output of console.log(elements[i], elements[i].innerHTML)

Answer 1

.innerHTML should be correct as seen here: https://jsfiddle.net/awLynp28/3/ . All I did was copy your script, have it run on page load (since it looks like you have something like that in there, I am assuming your function is getting called after the data is fully called in), and change var change = parseFloat(elements[i].innerHTML);

document.addEventListener('DOMContentLoaded', function() {
  var elements = document.getElementsByClassName("change");
  for (var i = 0; i < elements.length; i++) {
    var change = parseFloat(elements[i].innerHTML); //this is where I put innerHTML
    console.log(change);
    if (change > 0) {
      elements[i].innerHTML = "▴ " + change + "%";
      elements[i].classList.add("text-success");
    }
    if (change < 0) {
      elements[i].innerHTML = "▾ " + change + "%";
      elements[i].classList.add("text-danger");
    }
  }
}, false);