A ver si miramos un poquito más la documentación... Aunque en este caso incluso atendiendo al propio nombre del método uno se puede dar cuenta: getElementsByClassName().
El método getElementsByClassName()
devuelve una colección de elementos, no un elemento. Por tanto, no puedes obtener la propiedad value
directamente de esa colección.
Literalmente, esto es lo que devuelve, según la documentación:
A live HTMLCollection of found elements.
Tendrías que recorrer la colección y mostrar el valor de cada elemento:
const elements = document.getElementsByClassName('curso_interes');
for (let i = 0; i < elements.length; i++) {
alert(elements[i].value);
}
Tal vez te estás preguntando si existe un método getElementByClassName()
, para obtener un único elemento. Y la respuesta es no, ya que puede haber varios elementos que tengan una misma clase, no tiene sentido, como por ejemplo sí lo tiene getElementById()
, ya que se espera que sólo haya un elemento que tenga un determinado id.
Si en tu ejemplo sólo te interesan los elementos option
seleccionados, y no todos, entonces puedes comprobar la propiedad selected
:
const elements = document.getElementsByClassName('curso_interes');
for (let i = 0; i < elements.length; i++) {
if (elements[i].selected) {
alert(elements[i].value);
}
}
Pero hay una forma aún más sencilla, que es mediante la propiedad selectedOptions
de un elemento select
múltiple. Por supuesto, primero tienes que obtener ese elemento, en vez de obtener los elementos según su class
:
const elements = document.getElementById('idDeTuSelect').selectOptions;