Tengo un botón y un div vacío en HTML.
<button id="add_sentence">Click here!</button> <div id="parent"></div>En JS, tengo datos en matriz
let data = [{ sentence: "Hi, I'm from Azerbaijan" }, {sentence: "I'm 36 years old"}, { sentence: "I learn front-end development}]Necesito una función que cuando hago clic en el botón ("#add_sentence"), solo toma una oración de la matriz ("data") y la agrega a div ("#parent").
Puedo agregar toda la matriz a div vacío con 1 clic. Pero quiero que el primer clic agregue la primera oración. Luego, el segundo clic agrega la segunda oración. El tercer clic agrega la tercera oración y así sucesivamente.
¿Alguien puede ayudar?
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>Sin recuento de clics...
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>