Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Aparecer un contenedo "n" veces

Estas en el tema de Aparecer un contenedo "n" veces en el foro de Javascript en Foros del Web. Buen dia, tengo un contenedor que quiero hacer que aparezca "n" veces dependiendo el valor que el usuario escriba, mi duda es ¿como lo podria ...
  #1 (permalink)  
Antiguo 25/12/2020, 21:36
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 5 años, 2 meses
Puntos: 0
Pregunta Aparecer un contenedo "n" veces

Buen dia, tengo un contenedor que quiero hacer que aparezca "n" veces dependiendo el valor que el usuario escriba, mi duda es ¿como lo podria hacer?, ya intente con un for pero no agarra el valor del usuario, soy nuevo en javascript

Código HTML:
Ver original
  1. <div class="col-md-6">
  2.       <label class="form-label">Número de canciones</label>
  3.       <input type="number" id="numSong" class="form-control">
  4.     </div>
  5.     <br>
  6.     <div class="container-sm" id="div" style="">
  7.       <h5 id="sng">Canción #n</h5>
  8.       <p><div class="row g-3">
  9.         <div class="col">
  10.           <label class="form-label">Nombre de la canción</label>
  11.           <input type="text" class="form-control">
  12.         </div>
  13.         <div class="col">
  14.           <label class="form-label">Artistas</label>
  15.         <input type="text" class="form-control">
  16.         </div>
  17.       </div></p>
  18.       <p><div class="row g-3">
  19.         <div class="col">
  20.           <label class="form-label">Género</label>
  21.           <select name="gender" class="form-control">
  22.             <option selected>Choose...</option>
  23.             <option value="">1</option>
  24.             <option value="">2</option>
  25.             <option value="">3</option>
  26.           </select>
  27.         </div>
  28.         <div class="col">
  29.           <label class="form-label">Canción a subir</label>
  30.           <input type="file" class="form-control">
  31.         </div>
  32.       </div></p>
  33.     <br>
  34.     </div>

Código Javascript:
Ver original
  1. function songs() {
  2.   var number = document.getElementById('numSong').value;
  3.   var container = document.getElementById('div');
  4.   var i;
  5.  
  6.   for(i = 1; i <= number; i++) {
  7.     container.style.display = "block";
  8.   }
  9. }

Última edición por saulrayados; 25/12/2020 a las 22:43
  #2 (permalink)  
Antiguo 28/12/2020, 09:43
 
Fecha de Ingreso: abril-2006
Mensajes: 583
Antigüedad: 15 años, 1 mes
Puntos: 120
Respuesta: Aparecer un contenedo "n" veces

pues primero debes obtener el TEMPLATE que en tu caso seria el "div" y Clonar el NODO y ponerlo dentro del contenedor principal usa la funcion parseInt para convertir en Numero entero , para el FOR ya que un input.value siempre retorna "strings"

con eso clonas tu contenedor y lo replicas
container.cloneNode()
luego de replicarlo debes insertar el clon con appendNode o algun similar dependiendo de la version de javascrip si usas jQuery es mas sencillo
__________________
Mis aportes te ayudaron??, te hicieron ahorrar valiosos tiempo??, si quieres puedes agradecerme con un Gracias o con una donacion
https://paypal.com/pools/c/8lmNLmWnG9
  #3 (permalink)  
Antiguo 28/12/2020, 22:46
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 5 años, 2 meses
Puntos: 0
Respuesta: Aparecer un contenedo "n" veces

ya pude lograr que se clonara el contenedor pero los contenedores se duplican, y aparecen uno adentro de otro, por ejemplo si pongo 2 aparecen el doble y si le agrego mas, no se limpia el valor anterior y se acumula, ¿como puedo corregir eso?

Código Javascript:
Ver original
  1. function recibir() {
  2.   var valor = document.getElementById("num").value;
  3.   var container = document.getElementById("div1");
  4.  
  5.   for(i = 1; i <= valor; i++) {
  6.     container.style.display = "block";
  7.     container.appendChild(container.cloneNode([true]));
  8.   }
  9.  
  10. }
  #4 (permalink)  
Antiguo 28/12/2020, 22:53
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 5 años, 2 meses
Puntos: 0
Respuesta: Aparecer un contenedo "n" veces

ya pude hacer que el contenedor se duplique dependiendo el valor ingresado pero tengo otro problema, los contenedores se duplican al doble de lo que ingreso y aparecen uno adentro de otro, por ejemplo si escribo 2 aparecen el doble, también al escribir otro valor, el valor anterior no se borra y se acumulan los valores, ¿como puedo corregirlo?

Código Javascript:
Ver original
  1. function recibir() {
  2.   var valor = document.getElementById("num").value;
  3.   var container = document.getElementById("div1");
  4.  
  5.   container.cloneNode([true])
  6.  
  7.   for(i = 1; i <= valor; i++) {
  8.     container.style.display = "block";
  9.     container.appendChild(container.cloneNode([true]));
  10.   }
  11.  
  12. }
  #5 (permalink)  
Antiguo 29/12/2020, 11:11
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 12 años, 10 meses
Puntos: 2235
Respuesta: Aparecer un contenedo "n" veces

Debes agregar el nodo clonado al padre y, de preferencia, cambiar su ID:

Código Javascript:
Ver original
  1. function recibir() {
  2.       var valor = document.getElementById("num").value;
  3.       var container = document.getElementById("div1");
  4.  
  5.       // Clonar dentro del ciclo  
  6.       for(i = 1; i <= valor; i++) {
  7.         let nuevo = container.cloneNode(true); // El parámetro no debe ser un arreglo
  8.         nuevo.id = 'div-nuevo-' + i;
  9.         nuevo.style.display = "block";
  10.         // Agrega el nuevo div al padre del contenedor
  11.         container.parentNode.appendChild(nuevo);
  12.       }
  13.      
  14.     }
__________________
- León, Guanajuato
- GV-Foto
  #6 (permalink)  
Antiguo 04/01/2021, 00:10
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 5 años, 2 meses
Puntos: 0
Respuesta: Aparecer un contenedo "n" veces

gracias, ya me funciono
  #7 (permalink)  
Antiguo 04/01/2021, 00:14
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 5 años, 2 meses
Puntos: 0
Respuesta: Aparecer un contenedo "n" veces

tengo otro problema, ¿como puedo hacer que al escribir otro valor el valor que ya estaba se borre?



La zona horaria es GMT -6. Ahora son las 03:01.