0

Lo que quiero hacer es que se cree un input number al hacer click en un botón, y de ahi ese input se elija un cierto valor y al hacer sumbit se cree la opción seleccionada. Todo esto desde javascript, intente tomar el id del input number y por alguna razon el switch no puede desplegar las opciones.

<div class="col-md-3"><button onclick="pregunta3();">Pregunta de opción multiple</button><br /></div>
<script>
 function pregunta3() {
                var hr1 = document.createElement("hr");
                var para = document.createElement("h3"); para.innerHTML = "Escribe tu pregunta:    ";
                var input = document.createElement("input"); input.style.width = "700px";
                var para1 = document.createElement("h3"); para1.innerHTML = "¿Cuantas respuestas deseas? (Max. 4 respuestas)";


                //Aqui es donde se crea el input number al cual le asigne ciertas caracteristicas y el botón de sumbit. 
                var input1 = document.createElement("input"); input1.setAttribute("type", "number"); input1.setAttribute("max", "4"); input1.setAttribute("min", "2"); input1.style.width = "200px";
                input1.value = "opciones"; input1.setAttribute("id", "selPregunta"); 
                var button = document.createElement("button"); button.setAttribute("type", "sumbit"); button.textContent = "Seleccionar"
                //Preguntas
                document.getElementById("divPreguntas").appendChild(para);
                document.getElementById("divPreguntas").appendChild(input);
                document.getElementById("divPreguntas").appendChild(para1);
                document.getElementById("divPreguntas").appendChild(input1);
                document.getElementById("divPreguntas").appendChild(button);
                document.getElementById("divPreguntas").appendChild(hr1);



                //Tomo valor del input number para crear las respuestas que pidan
                var respuesta = document.getElementById("selPregunta").value;

                switch (respuesta) {
                    case "2":
                        var respuesta1 = document.createElement("input"); input.style.width = "500px";
                        var respuesta2 = document.createElement("input"); input.style.width = "500px";

                        document.getElementById("divPreguntas").appendChild(respuesta1);
                        document.getElementById("divPreguntas").appendChild(respuesta2);
                        break;
                }

            }
</script>
//Aqui es donde se crearan las opciones dinamicamente
<div id="divPreguntas">

        </div>

1 respuesta 1

1

Estoy asumiendo que por "opciones" te refieres a los inputs que se deben crear cuando el usuario hace click en el botón "Seleccionar" después ingresar el número 2 en el input1. Si eso es lo que estás buscando, pude agregar 2 "opciones", utilizando tu código, al final del div divPreguntas sin problema. En esta imagen puedes ver el resultado:

introducir la descripción de la imagen aquí

En el caso de que quieras agregar esos inputs al final de cada pregunta, te recomiendo envolver todos los campos de una pregunta y sus respuestas en un div para que puedas agrupar su información a medida que vayas creando nuevas preguntas. Este es un ejemplo de esta idea modificando tu código:

function agregarInputsRespuesta(numRespuestas, pregunta) {
  // Valido si el número de respuestas es mayor a 4 o menor que 2
  if (parseInt(numRespuestas, 10) > 4 || parseInt(numRespuestas, 10) < 2) return null;

  // Creo el div que contendra las respuestas y le asigno la clase "js-respuestas"
  var respuestas = document.createElement("div");
  respuestas.setAttribute("class", "js-respuestas");

  // Reviso si ya existe una sección de respuestas para esta pregunta. En ese caso la elimino para crear una respuesta. Esto me permite actualizar el número de respuestas de una pregunta
  var respuestasViejas = pregunta.getElementsByClassName("js-respuestas");
  if (respuestasViejas.length) respuestasViejas[0].remove();

  // Creo un input de respuesta según la opción escogida y se la agrego al contenedor de respuestas
  for (var i = 0; i < parseInt(numRespuestas, 10); i++) {
    var respuesta = document.createElement("input"); respuesta.style.width = "500px";

    respuestas.appendChild(respuesta);
  }

  // Finalmente agrego el contenedor de las respuestas a la pregunta
  pregunta.appendChild(respuestas);
}


function pregunta3() {
  // Agrego un div que contiene todos los campos de una pregunta y sus los inputs de respuestas
  var pregunta = document.createElement("div");
  var hr1 = document.createElement("hr");
  var para = document.createElement("h3");
  para.innerHTML = "Escribe tu pregunta:    ";
  var input = document.createElement("input");
  input.style.width = "700px";
  var para1 = document.createElement("h3");
  para1.innerHTML = "¿Cuantas respuestas deseas? (Max. 4 respuestas)";


  //Aqui es donde se crea el input number al cual le asigne ciertas caracteristicas y el botón de sumbit.
  var input1 = document.createElement("input");
  input1.setAttribute("type", "number");
  input1.setAttribute("max", "4");
  input1.setAttribute("min", "2");
  input1.style.width = "200px";
  input1.value = "opciones";
  input1.setAttribute("id", "selPregunta");

  var button = document.createElement("button");
  button.setAttribute("type", "button");
  button.textContent = "Seleccionar"
  
  // Utilizo la propiedad en click para generar los inputs correspondientes cuando el usuario hace click en el botón "Seleccionar"
  button.onclick = function() {
    //Tomo valor del input para crear las respuestas que pidan
    var respuesta = input1.value;
    agregarInputsRespuesta(respuesta, pregunta);
  }

  //Preguntas
  pregunta.appendChild(para);
  pregunta.appendChild(input);
  pregunta.appendChild(para1);
  pregunta.appendChild(input1);
  pregunta.appendChild(button);
  pregunta.appendChild(hr1);


  document.getElementById("divPreguntas").appendChild(pregunta);

}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="divPreguntas"></div>
  <div class="col-md-3">
    <button onclick="pregunta3();">Pregunta de opción multiple</button><br />     </div>
</body>
</html>

Este es el resultado:

introducir la descripción de la imagen aquí

1
  • Ha funcionado, muchisimas gracias!
    – Alexis
    Commented el 1 jun. 2020 a las 21:39

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.