我正在尝试获取返回结果(标题、内容、诗人(，以显示在HTML上。现在，每当我刷新页面时，只有内容会动态更改。我不确定我在.then((中做错了什么-你能把多个document.getElementId放在那里吗，或者有其他方法来构建它吗？
注意：我对其他文档.getElementId和document.getElementsByTagName进行了评论，因为它们只显示了两次的全部内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel = "stylesheet" href = "style.css">
<title>Fetch a poem</title>
</head>
<body>
<h1 class = "title">Title</h1>
<h3 id = "content">Fetch a Poem</h3>
<p id = "poet">Poet</p>
<script>
console.log('about to fetch a poem');
catchPoem()
.then(poem => {
// document.getElementsByClassName('title').innerText = poem;
document.getElementById('content').innerText = poem;
// document.getElementById('poet').innerText = poem;
console.log('content is showing');
})
.catch(error => {
console.log('error!');
console.error(error);
});
async function catchPoem() {
const response = await fetch('https://www.poemist.com/api/v1/randompoems');
let json = await response.json();
let title = json[0].title
let content = json[0].content
let poet = json[0].poet.name
console.log(title)
console.log(content)
console.log(poet)
return [title, content, poet]
}
</script>
</body>
</html>
您需要在.then块中设置这三个
document.querySelector( '.title' ).textContent = title;
document.getElementById( 'content' ).textContent = content;
document.getElementById( 'poet' ).textContent = poet;
我在这里使用了textContent，你可以使用innerText
console.log('about to fetch a poem');
catchPoem()
.then(([title, content, poet]) => {
// document.getElementsByClassName('title').innerText = poem;
document.querySelector('.title').textContent = title;
document.getElementById('content').textContent = content;
document.getElementById('poet').textContent = poet;
// document.getElementById('poet').innerText = poem;
console.log('content is showing');
})
.catch(error => {
console.log('error!');
console.error(error);
});
async function catchPoem() {
const response = await fetch('https://www.poemist.com/api/v1/randompoems');
let json = await response.json();
let title = json[0].title
let content = json[0].content
let poet = json[0].poet.name
return [title, content, poet]
}h1, p{
text-align: center;
}
h1, h3, p{
padding: .5rem 1rem;
border-radius: 4px;
}
.title{
background-color: cadetblue;
}
#content{
background-color: chocolate;
}
#poet{
background-color: yellow;
}<h1 class="title">Title</h1>
<h3 id="content">Fetch a Poem</h3>
<p id="poet">Poet</p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel = "stylesheet" href = "style.css">
<title>Fetch a poem</title>
</head>
<body>
<h1 id = "title">Title</h1>
<h3 id = "content">Fetch a Poem</h3>
<p id = "poet">Poet</p>
<script>
console.log('about to fetch a poem');
catchPoem()
.then(poem => {
document.getElementById('title').innerText = poem[0];
document.getElementById('content').innerText = poem[1];
document.getElementById('poet').innerText = poem[2];
console.log('content is showing');
})
.catch(error => {
console.log('error!');
console.error(error);
});
async function catchPoem() {
const response = await fetch('https://www.poemist.com/api/v1/randompoems');
let json = await response.json();
let title = json[0].title
let content = json[0].content
let poet = json[0].poet.name
console.log(title)
console.log(content)
console.log(poet)
return [title, content, poet]
}
</script>
</body>
</html>
另一种泛化方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Fetch a poem</title>
</head>
<body>
<div id="content">
<p id="loader">Loading Poems ....</p>
</div>
<script>
console.log("about to fetch a poem");
catchPoem()
.then((poems) => {
let div = document.getElementById("content");
div.removeChild(document.getElementById("loader"));
for (let poem of poems) {
let title = document.createElement("h1");
title.innerHTML = poem.title || "No Title";
div.appendChild(title);
let poemTag = document.createElement("h3");
poemTag.innerHTML = poem.content || "No Poem";
div.appendChild(poemTag);
let poet = document.createElement("p");
poet.innerHTML = poem.poet.name || "No Poet";
div.appendChild(poet);
}
})
.catch((error) => {
console.log("error!" + error);
});
async function catchPoem() {
const response = await fetch("https://www.poemist.com/api/v1/randompoems");
let json = await response.json();
return json;
}
</script>
</body>
</html>