4

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

2
  • 1
    ¿Puedes añadir el HTML? Es mucho más sencillo trabajar en un problema si podemos reproducir el escenario Commented el 4 mar. 2019 a las 15:58
  • Voy a ver que puedo subir que pueda servir, porque son bastantes líneas, y depende de varios archivos. Gracias por cierto por preocuparse Commented el 4 mar. 2019 a las 16:08

1 respuesta 1

3

Pues creo que lo tienes ya casi hecho: te falta tomar la respuesta y mostrarla en algún sitio:

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(){
      for (let i=0; i<idInput;i++) {
        respuestaAlumno.push($(`#${i}`).val());
      }
      console.log('Los valores son',respuestaAlumno.toString());
      mostrarInfo(respuestaAlumno);

    });
 
}

function mostrarInfo(valores) {
   const info= $('#informacion');
   let lista=$('<ol></ol>');
   valores.forEach(value => lista.append(`<li>${value}</li>`));
   info.append(lista);
}   

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>

1

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.