0

Tengo 3 cartas, donde quiero que se muestre la misma lista desplegable que toma los datos de un array. HTML:

    <div class="card" style="width: 20rem;">
        <img src="./visa-logo-1.png" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Visa</h5>
          
          <select id="Formulario" class="formbank" aria-label="Default select example">
          <option selected>Banco Emisor</option>
          </select>
          <button class="botonBanco" type="button">Seleccionar</button>
        </div>

JS:

function mostrar_Bancos()
{
    TodosBancos.forEach(i => {
        document.getElementById("Formulario").innerHTML += "<option value='" +i.nombre+"'> "+i.nombre+ "</option>";
        console.log(i.nombre)});
            {   
            }

    }

mostrar_Bancos(); 

El array se llama TodosBancos. Cuando uso el getElementsByClassName no me funciona, solo con el id

function mostrar_Bancos() {
    TodosBancos.forEach(i => {
        document.getElementsByClassName("formBank").innerHTML += "<option value='" +i.nombre+"'> "+i.nombre+ "</option>";
        console.log(i.nombre)
    });
    {}
}

mostrar_Bancos();
2
  • ¿Podrías añadir en la pregunta un ejemplo de cómo haces la consulta con el getElementByClassName? Tal vez esté ahí el error. Commented el 17 ago. 2022 a las 17:03
  • function mostrar_Bancos() { TodosBancos.forEach(i => { document.getElementsByClassName("formBank").innerHTML += "<option value='" +i.nombre+"'> "+i.nombre+ "</option>"; console.log(i.nombre)}); { } } mostrar_Bancos(); Commented el 17 ago. 2022 a las 22:53

1 respuesta 1

1

Efectivamente parece que el problema lo tenías ahí. En realidad hay dos problemas

Por un lado, has usado la clase formBank mientras que en la etiqueta has usado formbank (en minúsculas)

Pero el fallo principal es que getElementByClassName* no devuelve un valor único sino un array, ya que en este caso tendrías tres cards con la misma clase. Deberías usar un código como este

function mostrar_Bancos() {
      TodosBancos.forEach( i => {
        document.getElementsByClassName("formbank")[0].innerHTML += "<option value='" +i.nombre+"'> "+i.nombre+ "</option>";
        document.getElementsByClassName("formbank")[1].innerHTML += "<option value='" +i.nombre+"'> "+i.nombre+ "</option>";
        document.getElementsByClassName("formbank")[2].innerHTML += "<option value='" +i.nombre+"'> "+i.nombre+ "</option>";
        console.log(i.nombre)});
        {                }
    }
1
  • Muchas gracias! Commented el 18 ago. 2022 a las 15:27

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.