[英]Javascript can't get content of element
I've written code using Javascript to format the following section of a webpage based on the values:我使用 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>
(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) (每个 id 中的文本值都是从数据库中提取的,并在我启动服务器时正确显示在网页上)
Here is my Javascript to format the HTML based on positive/negative values:这是我的 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");
}
}
}
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.问题是我定义 var 更改的那一行。 The output of the console.log on the line below it shows the text I want is there, see image below:
console.log 下面一行的 output 显示了我想要的文本,见下图:
But no matter what I try I cannot get the text contained within this div.但无论我尝试什么,我都无法获取此 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.
我已经尝试过 elements[i].value、.textContent、.innerHTML、.innerText、parseFloat(elements[i].innerHTML)... 但是当我尝试记录它们时它们都返回“未定义”。 I would really appreciate any suggestions!
我真的很感激任何建议!
Output of console.log(elements[i], elements[i].innerHTML) console.log(elements[i], elements[i].innerHTML) 的 Output
.innerHTML should be correct as seen here: https://jsfiddle.net/awLynp28/3/ . .innerHTML 应该是正确的,如下所示: 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);
我所做的只是复制你的脚本,让它在页面加载时运行(因为看起来你在那里有类似的东西,我假设你的 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.