Javascript 無法獲取元素的內容

Question

我使用 Javascript 編寫了代碼，以根據值格式化網頁的以下部分：

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

（每個 id 中的文本值都是從數據庫中提取的，並在我啟動服務器時正確顯示在網頁上）

這是我的 Javascript 根據正/負值格式化 HTML ：

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");
    }
  }
}

以下事件偵聽器正在調用此代碼：

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

問題是我定義 var 更改的那一行。 console.log 下面一行的 output 顯示了我想要的文本，見下圖：

但無論我嘗試什么，我都無法獲取此 div 中包含的文本。 我已經嘗試過 elements[i].value、.textContent、.innerHTML、.innerText、parseFloat(elements[i].innerHTML)... 但是當我嘗試記錄它們時它們都返回“未定義”。 我真的很感激任何建議！

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

Answer 1

.innerHTML 應該是正確的，如下所示： https://jsfiddle.net/awLynp28/3/ 。 我所做的只是復制你的腳本，讓它在頁面加載時運行（因為看起來你在那里有類似的東西，我假設你的 function 在數據被完全調用后被調用），並更改var change = parseFloat (元素[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);