El código VS me da un error:
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'estilo') en HTMLButtonElement.acc
function acc() { if (button.style.display == 'none') { button.style.display = 'block'; var button = document.createElement('button'); var div = document.createElement('div'); var img = document.createElement('img'); var h4 = document.createElement('h4'); div.appendChild(button); div.appendChild(img); div.appendChild(h4); h4.style.color = 'red'; h4 = 'Account'; button.innerHTML = h4; div.classList.add('achi'); document.getElementById('achi').appendChild(div); } else { button.style.display = 'none'; } } let accBtn = document.getElementById('acc-btn'); accBtn.addEventListener('click', acc);if para los estilos de un elemento que acaba de crear. Tú defines los estilos de tu nuevo elemento.h4 y la configura para que apunte a un elemento, luego la redefine más tarde para que sea igual a una cadena. Extraño. No hagas eso.button antes de que se haya definido. No está undefined hasta ese momento.<h4> está vacía. ¿Quieres eso?innerHTML solo para establecer contenido de texto. Use textContent o innerText en su lugar ( innerText mantiene las líneas nuevas).Refactorizado:
const accBtn = document.getElementById('acc-btn'); function acc() { const div = document.createElement('div'); div.classList.add('achi'); const button = document.createElement('button'); button.style.display = 'block'; button.textContent = 'Account' const img = document.createElement('img'); const h4 = document.createElement('h4'); h4.style.color = 'red'; div.appendChild(button); div.appendChild(img); div.appendChild(h4); document.getElementById('achi').appendChild(div); } accBtn.addEventListener('click', acc);