我在 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。但我想第一次點擊添加第一句話。然后，第二次點擊添加第二句。第三次點擊添加第三句等等。
任何人都可以幫忙嗎？
uj5u.com熱心網友回復：
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>uj5u.com熱心網友回復：
在下面的示例中，該AddSentence()方法被分配給<button>元素中的 onclick 屬性。每次<button>點擊元素時，從資料陣列中按順序選擇第一句插入到<div>元素中。如果控制變數多于data陣列元素個數，則再次設定為 0。
let data = [
{ sentence: "Hi, I'm from Azerbaijan" },
{ sentence: "I'm 36 years old"},
{ sentence: "I learn fron-end development" }
];
let control = 0;
function AddSentence()
{
parentElement = document.getElementById('parent');
parentElement.innerHTML = data[control ].sentence;
if(control >= data.length)
control = 0;
}<button id="add_sentence" onclick="AddSentence()">Click here!</button>
<div id="parent"></div>uj5u.com熱心網友回復：
沒有點擊次數...
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/405850.html
標籤：