Problema: Confeccionar una página que muestre un control input y mediante un control HTML select permitir que tipo de elemento se creará, cuando se presione un botón crear en forma dinámica el control input seleccionado.
La interfaz visual a implementar previo a que se presione el botón debe ser:
Luego cuando se presiona el botón crear el control input respectivo y mostrarlo en la página:
Solución
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Control input</h1>
<p>input type="
<select id="seleccion">
<option>seleccionar</option>
<option>text</option>
<option>button</option>
<option>checkbox</option>
<option>radio</option>
<option>file</option>
<option>password</option>
<option>submit</option>
<option>reset</option>
<option>range</option>
<option>hidden</option>
<option>date</option>
<option>color</option>
<option>email</option>
<option>month</option>
<option>number</option>
<option>search</option>
<option>tel</option>
<option>url</option>
<option>week</option>
</select> "
</p>
<p><input type="button" id="crear" value="crear"></p>
<div id="resultado"></div>
<script src="funciones.js"></script>
</body>
</html>
La funcionalidad se encuentra en el archivo JavaScript.
funciones.js
document.querySelector("#crear").addEventListener("click", () => {
const tipo = document.querySelector("#seleccion").value
if (tipo != "seleccionar")
document.querySelector("#resultado").innerHTML = `<input type="${tipo}">`
else
document.querySelector("#resultado").innerHTML = ""
})
Cuando se presiona el botón si el control "seleccion" almacena un string distinto a "seleccionar" se procede a crear un control del tipo seleccionado:
document.querySelector("#resultado").innerHTML = `<input type="${tipo}">`