显示错误消息的函数失效，报'textContent'为null错误求助

这个报错的核心原因很明确：你的DOM选择器没正确找到对应的错误提示span元素，导致pnameError和pemailError变量值为null，后续调用它们的textContent或innerHTML方法自然就会抛出错误。

问题根源拆解 #

看你JS里的这两行选择器代码：

let pnameError = document.querySelector("#popupfname + span#pf");
let pemailError = document.querySelector("#popupemail + span#pe");

你用了相邻兄弟选择器+，它的规则是只匹配紧挨着目标元素的下一个同级元素。但看你的HTML结构：

<input type="text" ... id="popupfname" /><br />
<span id="pf" class="error pfn" aria-live="polite"></span><br />

#popupfname的下一个同级元素是<br>，而不是你要找的<span#pf>，所以querySelector找不到目标元素，直接返回null。

两种快速修复方案 #

选一种适合你的就行：

方案1：修改JS选择器（更推荐）

既然错误提示span已经有唯一ID了，直接用getElementById获取最靠谱，完全不用依赖元素间的位置关系：

let pnameError = document.getElementById("pf");
let pemailError = document.getElementById("pe");

如果非要用querySelector，可以把相邻兄弟选择器+改成通用兄弟选择器~，它会匹配目标元素之后所有同级的匹配元素：

let pnameError = document.querySelector("#popupfname ~ span#pf");
let pemailError = document.querySelector("#popupemail ~ span#pe");

方案2：调整HTML结构

把input和span之间的<br>移到span后面，让span紧挨着input，这样原来的选择器就能生效：

<!-- 调整后的姓名输入区域 -->
<input type="text" pattern="[A-Za-z][^0-9]{2,25}" name="popupfname" id="popupfname" placeholder="Janez" autocorrect="off" autocapitalize="off" />
<span id="pf" class="error pfn" aria-live="polite"></span><br /><br />

<!-- 调整后的邮箱输入区域 -->
<input type="email" name="popupemail" id="popupemail" autocorrect="off" autocapitalize="off" maxlength="45" placeholder="moj@email.si"/>
<span id="pe" class="error pem" aria-live="polite"></span><br /><br />

额外优化小建议 #

• 初始化元素时加个存在性判断，避免后续逻辑因为元素找不到直接崩溃：

  let pnameError = document.getElementById("pf");
  if (!pnameError) {
    console.error("未找到错误提示元素#pf，请检查HTML结构");
    return;
  }
  

• 你的popfn函数逻辑有点小问题，输入有效时应该隐藏错误而不是调用showNameError()，可以改成这样：

  function popfn (event) {
    if (pname.validity.valid) {
      pnameError.textContent = '';
      pnameError.className = 'error'; // 移除active类隐藏错误
      pname.className = ''; // 恢复输入框默认样式
    } else {
      showNameError();
    }
  };
  

  同理调整popem函数，逻辑会更合理。

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