He actualizado mi pregunta para incluir el código. La función "updateNewP" no está actualizando el HTML interno pero no arroja un error. ¿Necesito agregar "esto" en alguna parte en ambas funciones? JavaScript:
let initial = document.getElementById("test"); initial.addEventListener("click", newPElement); let update = document.getElementById("update"); update.addEventListener("click", updateNewP); let myTextArea = document.getElementById("textArea"); //function that creates a P function newPElement(){ let newP = document.createElement("p"); newP.classList.add("myFont"); newP.innerHTML = "Initial Text"; myTextArea.appendChild(newP); return newP; } function updateNewP(newP){ newP.innerHTML ="Updated"; }HTML:
<h1>Testing</h1> <button id="test" class="test">Test</button> <button id="update">Update</button> <section id="textArea"> </section>La variable newP que se declaró dentro de functionA solo está disponible en functionA . Si necesita trabajar con esta variable en un newPUpdate , debe pasarse como argumento:
function functionA() { const newP = document.createElement("div"); newPUpdate(newP); } function newPUpdate(elem) { elem.innerHTML = `${someVariable}`; }Buscar el alcance de la variable en javascript lo ayudará a comprender lo que está sucediendo.
El addEventListener pasa el evento a la función. El evento no tiene la clave innerHTML porque no es un elemento.