TypeScript项目中HTML表单提交按钮失效问题求助

纯HTML环境下的原生JS表单代码能正常运行，但移植到TypeScript项目后失效，核心原因是TypeScript的严格类型检查和项目模块化带来的DOM加载时机问题，以下是针对性修复方案：

1. 处理DOM元素的类型与非空判断 #

TypeScript对document.querySelector的返回值做了严格类型校验，默认返回Element | null，直接调用元素属性/方法会触发类型错误，导致代码无法正常编译或运行。需要添加非空断言或类型断言明确元素类型：

const url = "你的Google Apps Script函数地址";
// 用非空断言!确保元素存在，同时指定具体HTML元素类型
const form = document.querySelector("form")! as HTMLFormElement;
const submitBtn = document.querySelector(".submit")! as HTMLInputElement;
const messageEl = document.querySelector(".message")! as HTMLSpanElement;

2. 确保DOM完全加载后执行代码 #

TypeScript项目的代码可能在DOM未渲染完成时就执行，导致无法获取到表单元素。将代码包裹在DOMContentLoaded事件回调中，保证DOM加载完成后再绑定事件：

document.addEventListener("DOMContentLoaded", () => {
  const url = "你的Google Apps Script函数地址";
  const form = document.querySelector("form")! as HTMLFormElement;
  const submitBtn = document.querySelector(".submit")! as HTMLInputElement;
  const messageEl = document.querySelector(".message")! as HTMLSpanElement;

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    submitBtn.value = "submitting...";
    
    fetch(url, {
      method: "POST",
      body: new FormData(form)
    })
    .then(res => res.text())
    .then(data => {
      messageEl.innerHTML = data;
      submitBtn.value = "Send"; // 修复原代码中按钮文本还原错误的问题
    })
    .catch(err => {
      messageEl.textContent = err.message; // 用textContent避免HTML注入风险
      submitBtn.value = "Send";
    });
  });
});

3. 修复原代码的细节问题 #

• 原代码中请求完成后将按钮文本改为submit，需还原为初始的Send
• 错误提示改用textContent而非innerHTML，避免恶意HTML注入风险

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