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.