原生JS中将动态创建变量传递给其他函数的问题排查

不需要盲目添加this关键字解决问题，加this完全无法匹配你要操作的目标元素，你当前代码失效是两个基础逻辑问题导致的，全程无报错是因为JS的弱类型特性允许给任意对象动态添加属性，不会触发语法或运行时错误。

• 变量作用域不匹配：你在newPElement函数内部创建的newP是函数局部变量，仅在newPElement执行时的内部作用域可访问，外部的updateNewP函数拿不到这个p元素的引用；虽然你写了return newP，但addEventListener绑定回调时不会接收回调的返回值，这个返回值直接被丢弃了。
• 事件回调参数错配：给DOM绑定事件回调时，浏览器会默认给回调函数传入的第一个参数是点击事件对象（Event），不是你以为的新建p元素。你当前updateNewP里拿到的形参newP其实是事件对象，给事件对象设置innerHTML属性只是给JS对象加了一个无用属性，自然不会修改页面上的p内容，也不会抛错。
• 额外说明：事件回调里的this默认指向绑定事件的DOM元素本身，也就是你在updateNewP里写this的话，拿到的是id为update的按钮，不是你创建的p元素，完全无法实现修改目标。

HTML部分（原有代码无需修改） #

<h1>Testing</h1>
<button id="test" class="test">Test</button>
<button id="update">Update</button>
<section id="textArea">
</section>

JavaScript修正版 #

const initial = document.getElementById("test");
initial.addEventListener("click", newPElement);

const updateBtn = document.getElementById("update");
updateBtn.addEventListener("click", updateNewP);

const myTextArea = document.getElementById("textArea");
// 将p元素的引用声明在两个函数都能访问的外层作用域
let targetP = null;

function newPElement(){
  // 避免重复点击创建按钮生成多个p元素
  if (targetP) return;
  targetP = document.createElement("p");
  targetP.classList.add("myFont");
  targetP.innerHTML = "Initial Text";
  myTextArea.appendChild(targetP);
}

function updateNewP(){
  // 未创建p元素时点击更新按钮直接返回，避免空值报错
  if (!targetP) return;
  targetP.innerHTML = "Updated";
}

内容的提问来源于stack exchange，提问作者madQuestions