3

Soy principiante, tengo como proyecto realizar un quiz con imágenes usando HTML, JS, CSS y Bootstrap... Me encuentro detenido en un problema, no sé de qué forma crear varios elementos HTML desde JS para mostrar lo siguiente (10 veces):

<div class="row" id='main'>
        <div class="col-lg-4 col-md-6 ">
            <img src="css/images/01.png" alt="imagenes" >
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="datoInput" placeholder="Escribe...">
            </div>
        </div>

Tal cual debería quedar en HTML, pero debe ser enviado desde JS, solo he podido crear los divs y añadirles su img correspondiente... pero no logro añadir los elementos html faltantes. Los cuales son un div y dentro de ese div un input. Mi código JS actual es el siguiente:

const main = document.getElementById('main');


//Crear los divs para cada imagen
for (let i = 1; i <= 10; i++) {
  const div = document.createElement('div')
  div.className ='col-lg-4 col-md-6'
  main.appendChild(div)
 //Carga de Imagenes:
  div.innerHTML="<img src=./css/images/"+i+".png id='mostrarInput()'></img>"
}
0

1 respuesta 1

1

El OP confirma que esta solución es lo que esperaba:

const main = document.getElementById('main');


//Crear los divs para cada imagen
for (let i = 1; i <= 10; i++) {
  const div = document.createElement('div')
  div.className ='col-lg-4 col-md-6'
  main.appendChild(div)
 //Carga de Imagenes:
  div.innerHTML=`<img src=./css/images/`+i+`.png id='idimg`+i+`' alt="imagenes"></img><div class="input-group mb-3">
                <input type="text" class="form-control" id="datoInput`+i+`" placeholder="Escribe...">
            </div>`
}
<div class="row" id='main'>
</div>

Explicación de los cambios

  • En el HTML se ha suprimido el primer div pues lo crearemos directamente con javascript en el bucle for
  • En el javascript se ha agregado la línea del input en el innerHTML
  • Se ha cambiado el id de las imágenes pues no tenia sentido usar una función dentro que jamás seria ejecutada. Antes usaba mostrarInput() y lo he modificado por idimg más en número de secuencia del bucle
  • También se ha modificado el id del input para que no se repita agregando el número de secuencia del bucle representado por la i
5
  • Muchas gracias, me funcionó perfecto! Era lo que buscaba lograr!!! el 3 may. 2022 a las 9:49
  • Me alegro :-) Si esta respuesta cumple con tu pregunta deberias aceptarla para que la pregunta no quede pendiente eternamente. En este enlace aprenderás a aceptar respuestas.
    – masterguru
    el 3 may. 2022 a las 10:09
  • Por cierto, ojo con los id de los input, pues al hacerlo de este modo se repiten, y no deberian repetirse. Hay varias soluciones (la más práctica es volver a utilizar i en los id para que vayan nombrandose datoInput1, datoInput2, etc), pero luego tendras que tenerlo en cuenta donde envies el formulario (si es que eso es un formulario al final)
    – masterguru
    el 3 may. 2022 a las 10:13
  • Acabo de actualizar la respuesta con algunos cambios más que no habia visto y agregando una explicación de los cambios (esperaba que me dijeras si por ahi iban los tiros antes de eso)
    – masterguru
    el 3 may. 2022 a las 10:20
  • Gracias por el apoyo, no tenia en cuenta lo de los id en cada input, me ayudó más con las mejoras de solución. Me quedó más clara la resolución, muchas gracias de nuevo. el 4 may. 2022 a las 4:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.