javascript - 缺少 innerHTML 内容
问题描述
我可能非常迟钝,但我似乎看不出我缺少这个 fetch 函数以在我的 html 页面上显示结果。我看到某样东西曾经短暂出现过,但随后它就永久消失了。我相信 const 文章可能是一个问题,但我不知道如何将其更改为显示我想要的结果。任何帮助将不胜感激。
const baseURL = 'https://cors-anywhere.herokuapp.com/https://fategrandorder.fandom.com/api.php';
const servantTitle = ['Artoria_Pendragon', 'Artoria_Pendragon_(Alter)', 'Artoria_Pendragon_(Lily)', 'Nero_Claudius', 'Siegfried', 'Gaius_Julius_Caesar', 'Altera', 'Gilles_de_Rais_(Saber)', "Chevalier_d'Eon", 'Okita_Sōji', 'Fergus_mac_Róich', 'Mordred', 'Nero_Claudius_(Bride)', 'Ryōgi_Shiki_(Saber)', 'Rama, Water_Iri', 'Lancelot_Saber', 'Gawain', 'Bedivere', 'Elizabeth_Báthory_(Brave)', 'Miyamoto_Musashi', 'Arthur_Pendragon_(Prototype)', 'Suzuka_Gozen', 'Frankenstein_(Saber)', 'Yagyū_Munenori', 'Sigurd', 'Medb_(Saber)', 'Diarmuid_Ua_Duibhne', 'Lanling_Wang', 'Beni-enma', 'Lakshmibai', 'Jason', 'Katsushika_Hokusai_(Saber)', 'Astolfo_(Saber)', 'Dioscuri', 'Tomoe_Gozen_(Saber)', 'Saitō_Hajime'];
const URLs = servantTitle.map(servant =>
`${baseURL}?action=query&prop=revisions&titles=${servant}&rvprop=content&format=json`
)
console.log(URLs)
fetch(URLs)
.then(function(result) {
return result.json();
}).then(function(json) {
displayResults(json);
});
function displayResults(json) {
while (section.firstChild) {
section.removeChild(section.firstChild);
}
const articles = json.response.docs;
if (articles.length === 0) {
const para = document.createElement('p');
para.textContent = 'No results returned.'
section.appendChild(para);
} else {
for (let i = 0; i < articles.length; i++) {
const card = document.createElement('div');
const aka = document.createElement('aka');
const class1 = document.createElement('class');
const atk = document.createElement('atk');
const hp = document.createElement('hp');
const gatk = document.createElement('gatk');
const ghp = document.createElement('ghp');
const stars = document.createElement('stars');
const cost = document.createElement('cost');
const clearfix = document.createElement('div');
card.setAttribute('class', 'card');
clearfix.setAttribute('class', 'clearfix');
const container = document.createElement('div');
container.setAttribute('class', 'container');
container.appendChild(card);
card.appendChild(p);
card.appendChild(aka);
card.appendChild(class1);
card.appendChild(atk);
card.appendChild(hp);
card.appendChild(gatk);
card.appendChild(ghp);
card.appendChild(stars);
card.appendChild(cost);
card.appendChild(clearfix);
section.appendChild(card);
}
}
};
解决方案
推荐阅读
- gitlab - 在同一项目 Gitlab ci 中的管道之间下载工件
- azure - 如何为从未登录 VM 的域用户设置 nuget.config
- javascript - React-Admin 中的编辑样式
- reactjs - Jspdf自定义字体
- go - 如何忽略 go.mod 中的替换指令
- wpf - 如何在控件初始化之前防止在 ControlTemplate 中执行 Storyboard/EventTrigger?(XamlParseException)
- php - Laravel:根据过敏原限制从数据库表中提取配方?
- r - 使用 if_else 和 mutate 函数重新编码了一个变量,但是它创建的答案超出了应有的范围
- android - 如何在 MainActivity 修改 OnMapReadyCallback(在 MapsFragment 中声明)
- database - Keycloak docker 服务无法连接到数据库。尝试获取新连接时可抛出:null:无法创建连接