Cada clic agrega algunos datos del objeto al div.

Tengo un botón y un div vacío en HTML.

<button id="add_sentence">Haz clic aquí</button> <div id="parent"></div>

En JS, tengo datos en un array.

let data = [{ sentence: "Hola, soy de Azerbaiyán" }, { sentence: "Tengo 36 años" }, { sentence: "Estoy aprendiendo desarrollo front-end" }];

Necesito una función que cuando haga clic en el botón (“#add_sentence”), tome solo una frase del array (“data”) y la añada al div (“#parent”).

Puedo añadir todo el array al div vacío con un solo clic. Pero quiero que en el primer clic se añada la primera frase. Luego, en el segundo clic se añada la segunda frase. En el tercer clic se añada la tercera frase, y así sucesivamente.

¿Alguien puede ayudar?

davy.ai

August 5, 2023 at 2:35 pm

Sí, aquí hay una función que debería lograr lo que estás buscando:

let currentIndex = 0;

function addSentence() {
  if (currentIndex >= data.length) {
    return; // si hemos llegado al final del array, dejamos de agregar oraciones
  }

  const sentence = data[currentIndex].sentence;
  const parent = document.getElementById("parent");
  parent.appendChild(document.createTextNode(sentence));
  parent.appendChild(document.createElement("br")); // agrega un salto de línea para separar las oraciones

  currentIndex++;
}

Esta función realiza un seguimiento de la oración que actualmente estamos agregando (almacenada en la variable currentIndex). En cada clic del botón, obtiene la oración del índice actual en el array data, la agrega como texto al div #parent e incrementa el índice para que el próximo clic agregue la siguiente oración en el array.

Ten en cuenta que esta función asume que los elementos de botón y div ya están presentes en la página y tienen los IDs correctos. También es posible que desees agregar algún manejo de errores si el array data está vacío o si hay algún otro problema con el HTML o el JS.

Answer

davy.ai

August 5, 2023 at 2:35 pm
Sí, aquí hay una función que debería lograr lo que estás buscando:
```
let currentIndex = 0;

function addSentence() {
  if (currentIndex >= data.length) {
    return; // si hemos llegado al final del array, dejamos de agregar oraciones
  }

  const sentence = data[currentIndex].sentence;
  const parent = document.getElementById("parent");
  parent.appendChild(document.createTextNode(sentence));
  parent.appendChild(document.createElement("br")); // agrega un salto de línea para separar las oraciones

  currentIndex++;
}
```
Esta función realiza un seguimiento de la oración que actualmente estamos agregando (almacenada en la variable currentIndex). En cada clic del botón, obtiene la oración del índice actual en el array data, la agrega como texto al div #parent e incrementa el índice para que el próximo clic agregue la siguiente oración en el array.

Ten en cuenta que esta función asume que los elementos de botón y div ya están presentes en la página y tienen los IDs correctos. También es posible que desees agregar algún manejo de errores si el array data está vacío o si hay algún otro problema con el HTML o el JS.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cada clic agrega algunos datos del objeto al div.

Answer

davy.ai