JS打开模态框后修改锚点文本时触发TypeError空值错误

问题描述 #

在使用JavaScript实现表单提交后打开模态框，并修改模态框内锚点标签文本内容时，反复触发以下错误：

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

或

Uncaught TypeError: Cannot set properties of null (setting 'textContent')

控制台能正确输出表单输入的邮箱值，但修改锚点内容时始终报错。相关代码如下：

模态框HTML代码 #

<!-- Success Modal -->
<div class="modal-container" id="modal">
    <div class="modal-main">
        <img
            src="./assets/images/icon-success.svg"
            alt="success image"
        />
        <h1 class="modal-header">Thanks for subscribing!</h1>
        <p>
            A confirmation email has been sent to
            <a href="#" id="modal-email">test</a>. Please open it and
            click the button inside to confirm your subscription.
           
        </p>
    </div>
    <button id="dismiss-btn">Dismiss message</button>
</div>

表单HTML代码 #

<form id="form">
    <label for="email">Email address</label>
    <input
        type="email"
        name="email"
        id="email"
        placeholder="email@company.com"
    />
    <button id="button">Subscribe to monthly newsletter</button>
</form>

原JavaScript代码 #

const form = document.getElementById("form");
const btn = document.getElementById("button");
const dismissBtn = document.getElementById("dismiss-btn");
const modal = document.getElementById("modal");
const modelEmail = document.getElementById("model-email");

form.addEventListener("submit", function (e) {
    e.preventDefault();
    modal.style.display = "block";

    let formData = new FormData(this);
    let inputValue = formData.get("email");

    console.log(inputValue);
    modelEmail.textContent = "example";
});

dismissBtn.onclick = function () {
    modal.style.display = "none";
};

错误原因 #

核心问题是ID拼写错误：

• 模态框内锚点的HTML ID是modal-email（注意前缀是modal）
• 但JavaScript中获取元素时写成了model-email（错误写成model）

这导致document.getElementById("model-email")返回null，自然无法设置textContent或innerHTML属性。

解决方案 #

1. 修正ID拼写错误 #

将JavaScript中的ID参数改为正确的modal-email，同步变量名（可选，提升语义一致性）：

const form = document.getElementById("form");
const btn = document.getElementById("button");
const dismissBtn = document.getElementById("dismiss-btn");
const modal = document.getElementById("modal");
// 修正ID拼写，变量名同步改为modalEmail
const modalEmail = document.getElementById("modal-email");

form.addEventListener("submit", function (e) {
    e.preventDefault();
    modal.style.display = "block";

    let formData = new FormData(this);
    let inputValue = formData.get("email");

    console.log(inputValue);
    // 使用修正后的变量设置文本内容
    modalEmail.textContent = inputValue;
});

dismissBtn.onclick = function () {
    modal.style.display = "none";
};

2. 额外检查：确保DOM加载完成 #

如果修正拼写后仍报错，需确认JavaScript代码在DOM完全加载后执行，可通过以下方式实现：

• 将<script>标签放在HTML的</body>标签之前
• 用DOMContentLoaded事件包裹代码：

  document.addEventListener('DOMContentLoaded', function() {
      // 所有DOM操作代码放在此处
      const form = document.getElementById("form");
      // ... 其他变量定义和事件监听逻辑
  });
  

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