Quiero poder diseñar (o cambiar) div (s) creados dentro de una función. Sin embargo, este "cambio" no debe realizarse en la misma función. Dado que las variables creadas en funciones están en el ámbito local de esa función, ¿cómo llego a los div(s) creados para un estilo posterior (u otros cambios) desde el exterior? Intenté apuntar al nodo con querySelector pero Console devuelve Uncaught TypeError ya que no puede encontrar la variable.
Código de ejemplo en JS:
let container = document.querySelector('.container'); let divClass = document.querySelector('.div-class'); divClass.style = "backgroundColor: green"; container.addEventListener('click', () => { let createdDiv = document.createElement('div'); container.appendChild(createdDiv); createdDiv.classList.add('div-class'); })El problema con su código es que consulta incluso antes de que se haya creado el elemento.
let container = document.querySelector('.container'); container.addEventListener('click', () => { let createdDiv = document.createElement('div'); container.appendChild(createdDiv); createdDiv.classList.add('div-class'); }) let someButton= document.querySelector('.someButton'); someButton.addEventListener('click', () => { let divClass = document.querySelector('.div-class'); divClass.style.backgroundColor = "green"; }) .container,.someButton{ border:1px solid black; background:grey; margin-bottom:4em; } .div-class{ height:40px; width:40px; border:1px solid red; } <div class="container"> container </div> <div class="someButton"> someButton </div> En este fragmento, el acceso al div creado se coloca en otro evento de clic. Si hace clic en .someButton antes .container , se creará un error, pero si hace clic después, funcionará, ya que se creará el div.
Puede crear una variable en el ámbito global y asignarle el div que creará más adelante.
const container = document.querySelector('.container'); // assign sample element to avoid error if new_div is used before assigning. let newDiv = document.createElement('div'); container.addEventListener('click', () => { let newDiv = document.createElement('div'); container.appendChild(newDiv); newDiv.classList.add('div-class'); }) newDiv.style = "backgroundColor: green";