0

Estoy creando una página desde 0 solo utilizando el DOM(sin modificar HTML) y quiero crear un botón para que al seleccionar un valor de una lista (también creada con DOM), muestre las propiedades del valor seleccionad (un JSON creado)

Esto es lo que tengo.. cuando añado la función mostrarDatos, me muestra la información directamente sin haber pulsado el botón antes.

let body = document.getElementsByTagName("body")[0];

let h1 = document.createElement("h1");
h1.innerHTML = "PARTE 2 DEL EJERCICIO";
body.appendChild(h1);

let select = document.createElement("select");
body.appendChild(select);

for(let i = 0; i<personas.length; i++){
    let option = document.createElement("option");
    option.innerHTML = personas[i].nombre + " " + personas[i].apellidos;
    select.appendChild(option);
}

let botonMostrar = document.createElement("button");
botonMostrar.type = "button";
botonMostrar.style.marginLeft = "15px";
botonMostrar.innerHTML = "Mostrar datos";
//botonMostrar.onclick = "mostrarDatos()";
body.appendChild(botonMostrar);

Gracias de antemano.

1 respuesta 1

0

Casi lo tienes, solo te falta añadir la funciona a ejecutar como referencia en vez de un string.

Es decir:

botonMostrar.onclick = mostrarDatos

Ejemplo completo:

let body = document.getElementsByTagName("body")[0];

let h1 = document.createElement("h1");
h1.innerHTML = "PARTE 2 DEL EJERCICIO";
body.appendChild(h1);

let select = document.createElement("select");

body.appendChild(select);

let personas = [
  {nombre: "Nombre", apellidos: "Apellido"},
  {nombre: "Nombre2", apellidos: "Apellido2"},
]

for(let i = 0; i<personas.length; i++){
    let option = document.createElement("option");
    option.innerHTML = personas[i].nombre + " " + personas[i].apellidos;
    select.appendChild(option);
}

let botonMostrar = document.createElement("button");

function mostrarDatos(){
  console.log("Ejecutado")
}

botonMostrar.type = "button";
botonMostrar.style.marginLeft = "15px";
botonMostrar.innerHTML = "Mostrar datos";
botonMostrar.onclick = mostrarDatos
body.appendChild(botonMostrar);

1
  • Muchas gracias @MitaCloud . Ya lo he conseguido, no lo veia!!
    – Brok3r
    el 11 may. 2022 a las 17:23

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.