每次单击都会将一些数据从对象添加到 div答案

【问题标题】：Each click add some data from object to div每次单击都会将一些数据从对象添加到 div
【发布时间】：2022-01-06 19:53:26
【问题描述】：

我在 HTML 中有一个按钮和一个空 div。

<button id="add_sentence">Click here!</button>
<div id="parent"></div>

在 JS 中，我在数组中有数据

let data = [{ sentence: "Hi, I'm from Azerbaijan" }, {sentence: "I'm 36 years old"}, { sentence: "I learn front-end development}]

我需要一个函数，当我点击按钮（“#add_sentence”）时，它只从数组（“data”）中提取一个句子并添加到 div（“#parent”）。

我可以通过 1 次单击将所有数组添加到空 div。但我想第一次点击添加第一句话。然后，第二次点击添加第二句。第三次点击添加第三句等等。

谁能帮忙？

【问题讨论】：

保存点击次数，然后将其作为索引提供给数组
我是新学JS。你能写出这段代码吗？
我认为你应该自己尝试一下，如果卡住了再回来，我们会帮助调试。如果有人为你做，不会帮助你学习。但我确信有人会想要获得免费的互联网积分。

标签： javascript html button click each

【解决方案1】：

let data = [{ sentence: "Hi, I'm from Azerbaijan" }, {sentence: "I'm 36 years old"}, { sentence: "I learn fron-end development"}];

const button = document.querySelector("#add_sentence");
const parent = document.querySelector("#parent");

let clickCount = 0;

button.addEventListener('click', () => {
  if (clickCount < data.length) {
    const nextSentence = document.createElement('p');
    nextSentence.innerText = data[clickCount].sentence;
    parent.appendChild(nextSentence);
    clickCount++;
  }
})

<button id="add_sentence">Click here!</button>
<div id="parent"></div>

【讨论】：

非常感谢！我学到了很多！ ^_^
不客气，很高兴听到这有帮助。

【解决方案2】：

没有点击次数...

var data = [{ sentence: "Hi, I'm from Azerbaijan" }, {sentence: "I'm 36 years old"}, { sentence: "I learn front-end development"}],
    prnt = document.getElementById("parent"),
    bttn = document.getElementById("add_sentence");

bttn.addEventListener("click", _ => data.length && (prnt.textContent += `${data.shift().sentence}
`));

#parent { white-space: pre;
}

<button id="add_sentence">Click here!</button>
<div id="parent"></div>

【讨论】：