Quisiera poder crear unos inputs mediante un select, ejemplo un select del 1 al 5 en donde yo selecciono un numero(2) y se debe crear 2 inputs peros sin ocupar un boton
Aqui en el index esta el formulario html en donde selecciono la cantidad de preguntas que tendra una encuesta con un select.
index.html
<form id="form" action="" method="post">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card">
<div class="card-header bg-secondary">
<h4 class="text-center">Crear Encuesta</h4>
</div>
<div class="card-body bg-light">
<div class="form-group">
<p>Tipo Encuesta</p>
<input type="text" id="tipoencuesta" name="tipoencuesta" class="form-control">
</div>
<div class="form-group">
<p>Nombre Encuesta</p>
<input type="text" id="nombre-encuesta" name="nombre-encuesta" class="form-control">
</div>
<div class="form-group">
<p>Cantidad Preguntas</p>
<select id="option" class="form-control" name="">
<option value="0">Cantidad Preguntas</option>
<option id="1" value="1">1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
<option id="4" value="4">4</option>
<option id="5" value="5">5</option>
</select>
<div id="input"></div>
</div>
<button type="submit" id="siguiente" class="btn btn-outline-success btn-block">Siguiente</button>
</div>
</div>
</div>
</div>
Aqui en el archivo javascript realizo la creacion de los inputs dependiendo del valor del select que uno seleccciona.
generador.js
'use strict'
window.addEventListener('load',function(){
var select = document.querySelector("#option");
var i ="";
var input = document.querySelector("#input");
select.addEventListener('change',function(e){
e.preventDefault();
for(i =select.value;i<=select.length;i++){
createInputs();
}
});
function createInputs(){
var element = document.createElement('div');
element.innerHTML=`
<div class="form-group">
<p>Pregunta ${i}</p>
<input type="text" class="form-control" />
</div>
`;
input.appendChild(element);
}
});