tengo un formulario, la idea es que uno digite la cantidad y se agreguen inputs, pero necesito que una vez agregados cada uno de ellos haga lo mismo(contexto: el primero es para los discos y los otros para las canciones)...intento usar el mismo codigo (con retoques), entiendan que estoy empezando xd, y no funciona...probe algunas cosas q no dieron resultado...se me hace dificil porque yo creo el div o la seccion con los inputs mediante js y estaria intentando no usar html, quizas ahi este fallando, agradeceria alguien me pueda guiar ya que no se como buscar esta misma situacion en otros tutoriales, de antemano muchas gracias
'use strict'
window.addEventListener('load', function () {
let select = document.querySelector("#numdiscos");
let i = "";
let seccionesDiscos = document.querySelector("#disco");
let seleccionado = document.querySelector("#seleccionardiscos");
seleccionado.addEventListener('click', function (e) {
e.preventDefault();
seccionesDiscos.innerHTML = '';
if (select.value >= 0 && select.value <= 5) {
for (i = 0; i < select.value; i++) {
createSeccionesDiscos();
}
}
});
function createSeccionesDiscos() {
let element = document.createElement('div');
element.innerHTML = `
<div class="form-group canciones">
<label>¿Cuántas canciones tiene el disco ${i + 1}?</label>
<input type="number" name="numeroDiscos" min="1" max="30" class="form-control cds" required>
<button type="submit" onclick="crearCanciones()" class="btn btn-success discos seleccionarCanciones">Ok</button>
</div>
<hr>
`;
seccionesDiscos.appendChild(element);
}
});
function crearCanciones(event) {
if (event.target && event.target.className == 'seleccionarCanciones') {
let cantCancion = document.querySelector(".cds");
let x = "";
let seccionesCanciones = document.querySelector(".canciones");
let seleccionando= document.querySelector(".seleccionarCanciones")
seleccionando.addEventListener('change', function (e) {
e.preventDefault();
seccionesCanciones.innerHTML = '';
if (cantCancion.value >= 0 && cantCancion.value <= 5) {
for (x = 0; x < cantCancion.value; x++) {
createSecciones();
}
}
});
function createSecciones() {
let elemento = document.createElement('div');
elemento.innerHTML = `
<div class="form-group">
<p>Nombre del album</p>
<input type="text" name="nombre-encuesta" class="form-control">
</div>
<hr>
<div class="canciones"></div>
`;
seccionesCanciones.appendChild(elemento);
}
}
}
document.addEventListener('click',crearCanciones,true );
<div class="form-group">
<label for="numdiscos">¿Cuántos discos/volúmenes tiene tu álbum?</label><br>
<input type="number" id="numdiscos" name="numeroDiscos" min="0" max="5" class="form-control cds" required>
<button type="submit" id="seleccionardiscos" class="btn btn-success discos">Ok</button>
<br>
</div>
<hr>
<div id="disco"></div>
<div class="canciones"></div>
No agrego lo que intente porque realmente es muy parecido, use classes y no ids, trate de diferenciarlos con condicionales y no se me ocurrio mucho mas... se agradece cualquier sugerencia, no estoy pidiendo el codigo entero pero si alguna guia clara de donde buscar o algo por el estilo