24 - Creación de controles de tipo input dinámicamente.



Problema:Disponer un control de tipo select con los valores enteros entre 0 y 5. Crear tantos controles de tipo input tipo text como indique el control select. Efectuar dicha creación cuando se dispara el evento onChange.
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <form method="post" action="#">
        <select onChange="crearText()" id="seleccion">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <br>
        <div id="seccion">
        </div>
        <br>
        <input type="submit" value="Registrar">
    </form>
    <script src="funciones.js"></script>
</body>

</html>
function crearText() {
    let cantidad = parseInt(document.getElementById('seleccion').value)
    let cadena = ""
    for (f = 0; f < cantidad; f++)
        cadena += `<input type="text" name="nombre${f}" id="nombre${f}"><br>`
    document.getElementById('seccion').innerHTML = cadena
}
Ver solución


Retornar