1

Estoy intentando crear un constructor que creará las diferentes partes de un formulario. Este es un ejemplo de la pregunta que querría que mi constructor creara:

<!-- LANGUAGE -->
        <div class="form-group">
             <label for="language">Idioma:</label>
             <select class="form-control" id="language" name="language" required>
                 <option value="es">Español</option>
                 <option value="en">Inglés</option>
                 <option value="it">Italiano</option>
                 <option value="fr">Francés</option>
                 <option value="de">Alemán</option>
                 <option value="pt">Portugués</option>
             </select>
         </div>

De momento este es mi js:

    class Select_question {
    constructor(name, options) {
        this._name = name;
        this._options = options;
    }

    get create_select_question() {
        var selectQuestion = '<div class="form-group">' +
            '<label for="' + this._name + '">' + this._name + '</label>' + 
            '<select class="form-control" id="' + this._name + '" name="' + this._name + '" required>' +
            '</select>' + '</div>';

        var node = document.createElement("option");      

        for (let i = 0; i < this._options.length; i++) {
            var textnode = document.createTextNode(this._options[i]);
            node.appendChild(textnode)
        }

        selectQuestion.getElementsByClassName("form-control").appendChild(node);
        document.getElementById("survey").appendChild(selectQuestion);
    }
}

const country = new Select_question('country', ['1','2'])
console.log(country)

y este mi html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey questions generator</title>
</head>
<body>
    <div id="survey"></div>

<script src="survey_questions_generator.js"></script>
</body>
</html>

No consigo que se genere la pregunta en el html y en la consola aunque me muestra el objeto me devuelve el siguiente error Exception: TypeError: selectQuestion.getElementsByClassName is not a function at Select_question.get create_select_question [as create_select_question]. He revisado la documentación y getElementsByClassName existe. Estoy perdida, ¿qué estoy haciendo mal?

4
  • He encontrado que en Chrome getElementsByClassName no es soportado. Pero he probado en firefox y tampoco me muestra el html. ¿Qué me está fallando? Commented el 18 feb. 2020 a las 9:36
  • ¿Tienes que hacerlo forzosamente con JavaScript a pelo? Te lo digo porque con jQuery o algún otro tipo de librería sería bastante más sencillo.
    – ordago
    Commented el 18 feb. 2020 a las 9:42
  • No, JQuery es una opción, pero no soy familiar con su sintaxis Commented el 18 feb. 2020 a las 9:45
  • Buenas, esta claro que getElementsByClassName existe pero para un elemento del DOM no para una variable string como es el caso de selectQuestion, por lo que primero añade esos datos al DOM para poder buscar.
    – lDanny7
    Commented el 18 feb. 2020 a las 11:30

1 respuesta 1

1

Existen varias formas de hacer esto, te indico una forma en que se puede hacer fácilmente con jQuery y el elemento template.

<div id="div1"></div>
<div id="div2"></div>

<template id="selectorIdiomas">
  <div class="form-group">
     <label for="language">Idioma:</label>
     <select class="form-control" id="language" name="language" required>
         <option value="es">Español</option>
         <option value="en">Inglés</option>
         <option value="it">Italiano</option>
         <option value="fr">Francés</option>
         <option value="de">Alemán</option>
         <option value="pt">Portugués</option>
     </select>
  </div>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      
<script>
$(document).ready(function() {
   var selectorIdiomas = $("#selectorIdiomas").html()
   $("#div1").html(selectorIdiomas);
   $("#div2").html(selectorIdiomas);
});
</script>
         

En este código defines un elemento template en el que dentro metes el código HTML que quieres repetir en varios sitios. De esta manera no tienes que crearlo con JavaScript a base de concatenaciones de strings. Todo lo que está dentro del template es invisible, hasta que hagas algo con JavaScript para mostrarlo.

Después se incluye jQuery y se define un manejador de evento para el evento ready del objeto document, para que el código se ejecute cuando el documento esté preparado y todos los elementos estén en el DOM.

El código lo que hace es cojer el HTML de lo que hay en el template (que tiene un id "selectorIdiomas" y guardarlo en una variable.

Después ese HTML se inyecta en dos divs ("div1" y "div2"). Aquí podrías inyectarlo en el sito donde tu necesites.

La función .html() de jQuery sirve para dos cosas. Si la ejecutas sin parámetros, te devuelve el contendido en HTML del elemento que hayas seleccionado. Si lo ejecutas con parámetros cambias el contenido del elemento con lo que le pases por parámetro. Por eso en el primer caso, utilizamos .html() para extraer el contenido del template, y en el segundo caso hacemos .html(selectorIdiomas) para inyectar el selector de idiomas en los divs.

Más info aquí:

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.