Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Reestablecer el numero de contenedores

Estas en el tema de Reestablecer el numero de contenedores en el foro de Javascript en Foros del Web. Buenas noches, tengo un formulario dentro de un contenedor que aparece las veces que el usuario desee, el problema es que si el usuario escribe ...
  #1 (permalink)  
Antiguo 07/01/2021, 22:59
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 4 años, 9 meses
Puntos: 0
Pregunta Reestablecer el numero de contenedores

Buenas noches, tengo un formulario dentro de un contenedor que aparece las veces que el usuario desee, el problema es que si el usuario escribe otra cantidad, los contenedores se acumulan, por ejemplo si escribo 2 aparecen los 2 contenedores pero si escribo otra cantidad, siguen apareciendo los 2 contenedores mas los que haya puesto después, ¿como puedo hacer que al escribir otra cantidad los contenedores que ya estaban anteriormente se borren y aparezca solo la nueva cantidad?

Código HTML:
Ver original
  1. <label>¿cantidad de canciones a subir?</label>
  2. <input type="number" id="num">
  3. <button type="button" onclick="recibir();">Mostrar</button>
  4. <h3 id="error" style="display:none;">Por favor escribe un valor valido</h3>
  5. <br><br>
  6. <div id="cont" style="display:none;">
  7.   <h4 id="enc"></h4>
  8.   <p><label>Titulo de la canción</label>
  9.     <input type="text"></p>
  10.   <p><label>Artista(s)</label>
  11.     <input type="text"></p>
  12.   <input type="checkbox">
  13.   <label>Acepto los términos</label>
  14.   <br><br>
  15.   <button type="submit">Subir</button>
  16.   <br><br>
  17. </div>


Código Javascript:
Ver original
  1. function recibir() {
  2.   var valor = document.getElementById("num").value;
  3.   var container = document.getElementById("cont");
  4.   var nulo = document.getElementById("error");
  5.  
  6.   // Clonar dentro del ciclo
  7.   if(valor <= 0) {
  8.     nulo.style.display = "block";
  9.   } else {
  10.     for(i = 1; i <= valor; i++) {
  11.       document.getElementById("enc").innerHTML = "Song #" + i;
  12.       let nuevo = container.cloneNode(true); // El parámetro no debe ser un arreglo
  13.      
  14.       nuevo.id = 'div-nuevo-' + i;
  15.       nuevo.style.display = "block";
  16.       nuevo.style.border = "5px solid lightblue";
  17.       nuevo.style.width = "20%";
  18.       nuevo.style.marginTop = "20px";
  19.      
  20.       // Agrega el nuevo div al padre del contenedor
  21.       container.parentNode.appendChild(nuevo);
  22.     }
  23.   }
  24. }
  #2 (permalink)  
Antiguo 09/01/2021, 12:42
 
Fecha de Ingreso: abril-2011
Mensajes: 141
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Reestablecer el numero de contenedores

Recuerda que el ID debe ser único en todo el documento, no se puede repetir.

Al clonar el contenedor con cloneNode(true), también estás clonando el <h4>, lo que produce que haya varios elementos con el mismo ID enc. Para evitar esto, lo más sencillo, es referenciar el elemento <h4> con nuevo.firstElementChild, sin necesidad de utilizar identificadores. Pero recuerda que el h4 debe ser el primer elemento del contenedor para que este método funcione.

Código HTML:
Ver original
  1. <label>¿cantidad de canciones a subir?</label>
  2. <input type="number" id="num">
  3. <button type="button" onclick="recibir();">Mostrar</button>
  4. <h3 id="error" style="display:none;">Por favor escribe un valor valido</h3>
  5. <br><br>
  6. <div id="canciones"></div>
  7. <div id="cont" style="display:none;">
  8.   <h4></h4>
  9.   <p><label>Titulo de la canción</label>
  10.     <input type="text"></p>
  11.   <p><label>Artista(s)</label>
  12.     <input type="text"></p>
  13.   <input type="checkbox">
  14.   <label>Acepto los términos</label>
  15.   <br><br>
  16.   <button type="submit">Subir</button>
  17.   <br><br>
  18. </div>

Código Javascript:
Ver original
  1. function recibir() {
  2.   var valor = document.getElementById("num").value;
  3.   var container = document.getElementById("cont");
  4.   var nulo = document.getElementById("error");
  5.  
  6.   document.getElementById("canciones").innerHTML = ""; // reseteamos lista de canciones
  7.  
  8.   // Clonar dentro del ciclo
  9.   if(valor <= 0) {
  10.     nulo.style.display = "block"; // mostrar error
  11.   } else {
  12.     nulo.style.display = "none"; // ocultar error
  13.     for(i = 1; i <= valor; i++) {
  14.       let nuevo = container.cloneNode(true);
  15.       nuevo.firstElementChild.innerHTML = "Song #" + i;
  16.       nuevo.id = 'div-nuevo-' + i;
  17.       nuevo.style.display = "block";
  18.       nuevo.style.border = "5px solid lightblue";
  19.       nuevo.style.width = "20%";
  20.       nuevo.style.marginTop = "20px";
  21.      
  22.       // Agrega el nuevo div al padre del contenedor
  23.       document.getElementById("canciones").appendChild(nuevo); // añadimos cancion a la lista
  24.     }
  25.   }
  26. }

Adjunto una DEMO funcionando.

  #3 (permalink)  
Antiguo 12/01/2021, 14:34
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 4 años, 9 meses
Puntos: 0
Respuesta: Reestablecer el numero de contenedores

gracias, ya funcionó



La zona horaria es GMT -6. Ahora son las 04:00.