使用对象名称插值变量

Question

这是我想知道的代码。无论如何我可以插入 'i' 变量来追踪 body 对象。这将使它在第一个循环中成为 body0，然后是 body1，依此类推。我试着做 body + i.innerHTML 但它给出了一个错误。有谁知道我会怎么做？

JS:

let url = 'https://poetrydb.org/random,linecount/1;10/title,author,lines.json'
const button = document.getElementById("button")
const title = document.getElementById("title")
const author = document.getElementById("author")
const body = document.getElementById("body")
const fullBody = document.getElementById("fullbody")

async function requestPoem(url) {
  let response = await fetch(url);
  let data = response.json()
  return data
}
  
button.onclick = async () => {
  let data = await requestPoem(url)
  title.innerHTML = data[0].title
  author.innerHTML = data[0].author
  for (let i = 0; i < 10; i++) {
    body.innerHTML = data[i].lines
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="scripts/main.js"></script>
    <title>poem request</title>
</head>
<body>
    <div id="fullbody">
        <h2 id="title"></p>
        <h3 id="author"></h3>
        <p id="body1"></p>
        <p id="body2"></p>
        <p id="body3"></p>
        <p id="body4"></p>
        <p id="body5"></p>
        <p id="body6"></p>
        <p id="body7"></p>
        <p id="body8"></p>
        <p id="body9"></p>
        <p id="body10"></p>
    </div>
    <button id="button">request poem</button>
</body>
</html>

Answer 1

嗯，粗略的方法可能是这样的：

const data = [
  'Poem line 1',
  'Poem line 2',
  'Poem line 3'
];

for (let i = 0; i < data.length; i++) {
  document.getElementById(`body${i+1}`).innerHTML = data[i];
}

<section>
  <p id="body1"></p>
  <p id="body2"></p>
  <p id="body3"></p>
</section>

但如果您共享更多的代码（包括标记），可能会有更优雅的解决方案。

EDIT 根据 OP

提供的信息更新了解决方案

let url = 'https://poetrydb.org/random,linecount/1;10/title,author,lines.json'
const button = document.getElementById("button")
const title = document.getElementById("title")
const author = document.getElementById("author")
const body = document.getElementById("body")
const fullBody = document.getElementById("fullbody")

async function requestPoem(url) {
  let response = await fetch(url);
  let data = response.json()
  return data
}
  
button.onclick = async () => {
  let data = await requestPoem(url)
  title.innerHTML = data[0].title
  author.innerHTML = data[0].author
  fullBody.innerHTML = data[0].lines.reduce((val, cur) => {
    return val + `<p>${cur}</p>`;
  }, '');
}

<h2 id="title"></p>
<h3 id="author"></h3>
<div id="fullbody"></div>
<button id="button">request poem</button>

使用对象名称插值变量

Interpolating variable with object name

html

javascript

interpolation

for-loop

object