Ver Mensaje Individual
  #2 (permalink)  
Antiguo 09/01/2021, 12:42
prueba230683
 
Fecha de Ingreso: abril-2011
Mensajes: 170
Antigüedad: 13 años
Puntos: 68
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.