我正在开发一个 js、html 和 firebase webapp。
我正在尝试从 firebase 获取分数列表并在 html 上显示它们。
我认为我的查询有效,但我无法在 html 上显示结果。
我首先尝试了一段适用于视频的代码,但它对我不起作用 (https://www.youtube.com/watch?v=NcewaPfFR6Y)
(html)
<p>
<ol id ="scorelist">
</ol>
</p>
(js)
function gotData(data) {
var scores = data.val();
var keys = Object.keys(scores);
for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var score = scores[k].score;
var li = createElement('li', score);
li.parent('scorelist');
}
}
我收到错误 createElement 未定义。当我尝试 document.createElement 时,li.parent('scorelist') 不起作用,我收到错误 li.parent is not a function。
然后我尝试了类似的方法,但也没有成功。
var scorelist = document.querySelector('#scoreslist')
function gotData(data) {
var scores = data.val();
var keys = Object.keys(scores);
for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var score = scores[k].score;
var li = document.createElement('li', score);
scorelist = li.textContent;
}
}
我真的被这个问题困住了!我将不胜感激,谢谢!
最佳答案
我添加了一个带有注释的示例,可以向您解释我所做的事情。
function gotData() {
// you had typo on the id, make sure you select the correct element.
const scorelist = document.querySelector("#scorelist");
var scores = { first: { score: 1 }, second: { score: 2 } };
var keys = Object.keys(scores);
for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var score = scores[k].score;
// first, create the element
const newListItem = document.createElement("li", score);
// and then, set the score as textContent of the newListitem.
newListItem.textContent = score;
// finally you should add the newListItem to the list parent element.
scorelist.appendChild(newListItem);
}
}
关于javascript - 如何在 html 上以列表形式显示 firebase 查询结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68748708/