单个外部JavaScript文件能否跨多HTML访问DOM并传递元素值？

先说说你遇到的报错原因 #

当你把同一个外部JS文件引入多个HTML页面时，每个页面加载JS时都会执行所有代码。比如在页面1（登录页）里，JS代码尝试获取greeting元素，但页面1根本没有这个DOM节点，所以document.getElementById("greeting")会返回null，自然没法设置它的innerHTML，就抛出了你看到的Uncaught TypeError。反过来，当页面2加载这个JS时，它也会尝试找loginButton和inputUsername，同样找不到，也会报错。

而且还有个核心问题：页面跳转后，之前页面的JS变量会被销毁，你没法直接把页面1的用户名变量传递到页面2，得用存储方案来中转数据。

具体实现步骤 #

1. 给每个页面加唯一标识

先给每个HTML页面的<body>标签加一个唯一ID，方便JS判断当前是哪个页面：

页面1（login.html）的关键代码：

<body id="login-page">
  <input type="text" id="inputUsername" placeholder="请输入用户名">
  <button id="loginButton">登录</button>
  <script src="your-script.js"></script>
</body>

页面2（greeting.html）的关键代码：

<body id="greeting-page">
  <div id="greeting"></div>
  <!-- 可选：加个清除问候的按钮 -->
  <button id="clearGreeting">清除问候</button>
  <script src="your-script.js"></script>
</body>

2. 修改外部JS文件，分页面执行逻辑

在JS里先判断当前页面的标识，只执行对应页面的代码，同时用localStorage来存储用户名（页面跳转后数据不会丢失）：

// 先获取当前页面的标识
const currentPageId = document.body.id;

// 登录页逻辑：绑定按钮事件，存储用户名并跳转
if (currentPageId === "login-page") {
  const loginBtn = document.getElementById("loginButton");
  const usernameInput = document.getElementById("inputUsername");

  // 先判断元素是否存在，避免报错
  if (loginBtn && usernameInput) {
    loginBtn.addEventListener('click', handleLogin);
  }

  function handleLogin() {
    const username = usernameInput.value.trim();
    if (!username) {
      alert("请输入用户名哦～");
      return;
    }
    // 把用户名存在localStorage里
    localStorage.setItem("savedUsername", username);
    // 跳转到问候页（注意替换成你的页面2文件名）
    window.location.href = "greeting.html";
  }
}

// 问候页逻辑：读取存储的用户名，设置问候语
else if (currentPageId === "greeting-page") {
  const greetingElement = document.getElementById("greeting");
  const clearBtn = document.getElementById("clearGreeting");
  const savedUsername = localStorage.getItem("savedUsername");

  // 设置问候语
  if (greetingElement && savedUsername) {
    greetingElement.innerHTML = `Welcome, ${savedUsername}`;
  }

  // 可选：清除问候和存储的用户名
  if (clearBtn) {
    clearBtn.addEventListener('click', () => {
      localStorage.removeItem("savedUsername");
      greetingElement.innerHTML = "";
    });
  }
}

额外注意点 #

• 确保所有元素的ID拼写正确，大小写也要一致；
• localStorage存储的是字符串，如果需要传递复杂数据（比如对象），可以用JSON.stringify()和JSON.parse()来处理；
• 如果用户清除浏览器缓存，localStorage里的数据会丢失，要是需要长期存储可以考虑后端数据库，但对于新手场景，localStorage足够用了。

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