1

estoy haciendo unos ejercicios con Javascript, ya que estoy aprendiendo, concretamente con temas de formularios, manejo de cookies, etc. El caso, que en un formulario, debo añadir un campo de selección múltiples desde javascript. Para ello, crée un input con un onclick llamando a la función.

El id del select es "aficiones", el del input es "inputAficiones" y la función "añadirAficion()".

Ésta es la función que hice.

function añadirAficion(){
    var aficiones = document.getElementById("aficiones");
    var aficionNueva = document.getElementById("nuevaAficion");
    var option = document.createElement("option");
    option.text = aficionNueva;
    aficiones.add(option);

y el html:

<label for="aficiones">
        <span>Aficiones: </span>
        <select name="aficiones" id="aficiones" multiple>
          <option value="programar">Programar</option>
          <option value="leer">Leer</option>
          <option value="cantar">Cantar</option>
          <option value="bailar">Bailar</option>
         </select>           
      </label>

<label for="nuevaAficion">Nueva Afición: </label> 
        <input type="text" class="nuevaAficion" id="inputAficion" name="nuevaAficion">
        <button onclick="añadirAficion()">Añadir Afición</button>

¿Qué estoy haciendo mal o que estoy pasando por alto?

Muchas gracias y un saludo.

1 respuesta 1

0

En primer lugar estas tratando de llamar a la clase de inputAficiones lo cual se hace con un document.getElementsByClassName("tu_clase");, pero puedes usar el id que le colocaste, claro haciendo el llamado a su value, ahora en la parte de option.text mandarías inputAficion, con eso quedaría.

function añadirAficion(){
    var aficiones = document.getElementById("aficiones");
    var inputAficion = document.getElementById("inputAficion").value;
    var option = document.createElement("option");
    option.text = inputAficion;
    aficiones.add(option);
    }
<label for="nuevaAficion">Nueva Afición: </label> 
        <input type="text" class="nuevaAficion" id="inputAficion" name="nuevaAficion">
        <button onclick="añadirAficion()">Añadir Afición</button>

<label for="aficiones">
        <span>Aficiones: </span>
        <select name="aficiones" id="aficiones" multiple>
          <option value="programar">Programar</option>
          <option value="leer">Leer</option>
          <option value="cantar">Cantar</option>
          <option value="bailar">Bailar</option>
         </select>           
      </label>

1
  • ¡Muchísimas gracias Felipe!
    – dan-ss93
    Commented el 28 nov. 2020 a las 17:09

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.