[SOLUCIONADO] Aparecer un contenedo "n" veces

[saulrayados]

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:

<div class="col-md-6">
      <label class="form-label">Número de canciones</label>
      <input type="number" id="numSong" class="form-control">
    </div>
    <br>
    <div class="container-sm" id="div" style="">
      <h5 id="sng">Canción #n</h5>
      <p><div class="row g-3">
        <div class="col">
          <label class="form-label">Nombre de la canción</label>
          <input type="text" class="form-control">
        </div>
        <div class="col">
          <label class="form-label">Artistas</label>
        <input type="text" class="form-control">
        </div>
      </div></p>
      <p><div class="row g-3">
        <div class="col">
          <label class="form-label">Género</label>
          <select name="gender" class="form-control">
            <option selected>Choose...</option>
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
          </select>
        </div>
        <div class="col">
          <label class="form-label">Canción a subir</label>
          <input type="file" class="form-control">
        </div>
      </div></p>
    <br>
    </div>
 

Código Javascript:

function songs() {
  var number = document.getElementById('numSong').value;
  var container = document.getElementById('div');
  var i;
  
  for(i = 1; i <= number; i++) {
    container.style.display = "block";
  }
}
 

[tuadmin]

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

[saulrayados]

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:

function recibir() {
  var valor = document.getElementById("num").value;
  var container = document.getElementById("div1");
  
  for(i = 1; i <= valor; i++) {
    container.style.display = "block";
    container.appendChild(container.cloneNode([true]));
  }
  
}
 

[saulrayados]

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:

function recibir() {
  var valor = document.getElementById("num").value;
  var container = document.getElementById("div1");
 
  container.cloneNode([true])
  
  for(i = 1; i <= valor; i++) {
    container.style.display = "block";
    container.appendChild(container.cloneNode([true]));
  }
  
}
 

[Triby]

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

Código Javascript:

function recibir() {
      var valor = document.getElementById("num").value;
      var container = document.getElementById("div1");
  
      // Clonar dentro del ciclo   
      for(i = 1; i <= valor; i++) {
        let nuevo = container.cloneNode(true); // El parámetro no debe ser un arreglo
        nuevo.id = 'div-nuevo-' + i;
        nuevo.style.display = "block";
        // Agrega el nuevo div al padre del contenedor
        container.parentNode.appendChild(nuevo);
      }
      
    }
 

[saulrayados]

gracias, ya me funciono

[saulrayados]

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