os comento, me encuentro realizando una aplicación con Javascript, HTML y CSS, que se trata de completar correctamente unos huecos (los inputs) y me ha surgido un problema que no consigo resolver. Dispongo de un texto con varios inputs (distinto número de inputs en función del texto), y la intención es guardar el contenido de estos inputs en una lista. Os pongo un ejemplo de texto:
El perro @ tiene hambre @ pero no hay comida en casa @
Las "@" correspondería con los inputs. Lo que busco es guardar el contenido de los inputs en una lista y en el orden correcto. Es decir, el contenido del primer input, sería el primer elemento de la lista, el segundo input con el segundo de la lista, y así sucesivamente, independientemente de que input se rellene antes.
Dispongo del siguiente código:
function mostrarEjercicio(textoEjercicio){
$('#mostrarTextoAlumno').remove();
var text=textoEjercicio;
var textSeparado=textoEjercicio.split("@");
var nInput=textSeparado.length-1;
var idInput=0;
for (var i=0;i<text.length;i++){
if(text.charAt(i)=="@"){
var inputN='<input id="'+idInput+'" type="text" style="width:55px; color:black">'
text = text.replace("@", inputN);
idInput++;
}
}
var cadena = '<div id="mostrarTextoAlumno"><div class="box-blue" ><h4 >'+ text + '</h4></div>';
cadena=cadena+'<div align="center" id="mostrarSolucion"><button style="color:white" type="button" class="btn btn-link" data-toggle="modal" data-target="#myModalInstruccionesAlumno">Instrucciones</button>'
cadena=cadena+'<button type="button" id="verBorradorBtn" class="btn btn-primary btn-md">Ver borrador</button></div></div>';
$('#texto').append(cadena);
var respuestaAlumno=[];
$('#verBorradorBtn').on('click',function(){
respuestaAlumno[i]=$("#"+i+"").val();
});
}
mostrarEjercicio('El perro @ tiene hambre @ pero no hay comida en casa @');
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="bg">
<div class="container text-center">
<div id="logoInicio">
</div>
<div class="row">
<div class="row">
<div id="datos">
</div>
</div>
<div class="row">
<div id="texto">
</div>
</div>
<div class="row">
<div id="informacion">
</div>
</div>
</div>
</div>
</div>
La parte que no conozco sería a partir $('#verBorradorBtn').on('click',function()
que es cuando almacenaría esa información de los inputs.Otra parte que no conozco, es como hacer referencia al id de forma correcta respuestaAlumno[i]=$("#"+i+"").val();
,
Gracias de antemano