• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

128
Views
El valor en el campo "entrada" se vuelve vacío

Hola gente, soy nuevo en JS World.

Estoy tratando de agregar A <div> dinámicamente a mi HTML con la ayuda de JavaScript.

 var counter = 0; function add_more_animals() { counter+=1; html = `<div id="animal${counter}"> <input type="text" name="animalName${counter}"> <input type="text" name="animalType${counter}"> </div>`; var form = document.getElementById("animals"); form.innerHTML+=html; }
 <div id="animals"> <div id="animal0"> <input type="text" name="animalName0"> <input type="text" name="animalType0"> </div> </div> <button type="button" onclick="add_more_animals()">Add animals (+)</button>

El problema al que me enfrento:

Mientras completo los campos de animalName0 y animalType0 en UI. Después de hacer clic en el botón Agregar para insertar más datos de animales, se crea un nuevo div según la lógica JS escrita en el archivo. Pero mis entradas anteriores a animalName0 y animalType0 se vacían y tengo que insertar datos allí nuevamente.

¿Puedes ayudar aquí?

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

El problema es que la línea form.innerHTML+=html es una abreviatura de form.innerHTML = form.innerHTML + html . Cuando toma form.innerHTML para agregarlo al html , solo toma el HTML. El texto escrito en las entradas no es parte del HTML. Luego, cuando configura el HTML interno, piense form.innerHTML = form.innerHTML + html , se crean nuevos elementos HTML basados solo en HTML. Cualquier estado, incluido el texto escrito, se pierde. Cualquier detector de eventos también se perderá en este proceso.

La forma adecuada de agregar un nuevo elemento y dejar los elementos adyacentes en su lugar es crear el nuevo elemento con document.createElement y agregarlo con una función como .appendChild , así

 var counter = 0 function add_more_animals() { counter+=1; // Create an empty element const newEl = document.createElement('div') newEl.id = `catalogue${counter}` // Add the first input const nameInput = document.createElement('input') nameInput.name = `animalName${counter}` newEl.appendChild(nameInput) // Now the second one const typeInput = document.createElement('input') typeInput.name = `animalType${counter}` newEl.appendChild(typeInput) // And finally attach everything to the animals form document.getElementById("animals").appendChild(newEl) }
 <div id="animals"> <div id="animal0"> <input type="text" name="animalName0"> <input type="text" name="animalType0"> </div> </div> <button type="button" onclick="add_more_animals()">Add animals (+)</button>

Como puede imaginar, esto puede volverse detallado si tiene una gran cantidad de HTML para agregar. Para facilitar este proceso, crearon etiquetas de plantilla que quizás prefiera usar. Úsalos así o así .

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error