1

Estoy haciendo un js que crea de la nada un botón y lo inserta en el DOM. Bien, se cómo hacerlo, pero no como ejecutarlo.

window.addEventListener("load", ()=>{
    insertElements();
});

function insertElements(btn, dv){
    createBtn();
    getElements();
    console.log('btn: '+btn);
    console.log('dv: '+dv);
}

function createBtn(){
    var btn =   document.createElement('button');
            btn.setAttribute("class", "btn-event");
            btn.setAttribute("placeholder", "HOLA");

    return btn
}

function getElements(){
    var dv = document.querySelector(".pre-btn");

    return dv
}
  1. Comienzo con un load el cual llama a la función insertElements()
  2. insertElements() llama a su vez a dos funciones: createBtn() y getElements()
  3. createBtn crea correctamente el botón, testado con console.log()
  4. getElements recoge bien el div vacío, también testado con console.log()
  5. Cuando hago los return con el valor de las variables, no consigo obtenerlasen insertElements, la función madre.

¿Cómo puedo recoger los parámetros por separado?

1 respuesta 1

1

Creo que no entiendes bien cómo funcionan las variables y tu scope. Te pongo el código con algunos comentarios, añadiendo un botón:

window.addEventListener("load", ()=>{
  const div = document.querySelector('#container');
  insertElements(div);
});

function insertElements(container) { //recibe el div
  const btn = createBtn(); //pero puedes crear variables/constantes locales
  console.log('btn: '+btn);
  // hasta este momento el botón existe pero no es parte del documento HTML
  container.appendChild(btn); //añadido
  const dv = getElements();
  console.log('dv: '+dv);
}

function createBtn(){
  const btn = document.createElement('button');
  btn.setAttribute("class", "btn-event");
  btn.innerHTML = "HOLA";

  return btn
}

function getElements(){
  var dv = document.querySelector(".pre-btn"); // no hay ningún elemento con esa clase en el documento en este momento

  return dv
}
#container {
  border: blue solid 1px;
  height : 50px;
  width: 100px;
}
<div id="container"></div>

3
  • El documento hmtl está a parte, en su body solamente hay un div.pre-btn, pero mejor agregarlo solamente al documento libremente, no quería meterlo en otro sitio. Por lo que deduzco que getElements sobra. Ahora bien, en el load, me dices que no paso ningún parámetro. ¿Cuál debería mandar si quisiera insertarlo dentro del div que comenté arriba?
    – AQMR
    Commented el 18 mar. 2021 a las 12:23
  • Edito y pongo algo más de código Commented el 18 mar. 2021 a las 12:25
  • Vale ya lo entendi!!!! Jope, no sabía que se podía poder como variable a una función, claro, retorna el resultado mismo. Que listo!
    – AQMR
    Commented el 18 mar. 2021 a las 12: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.