点击按钮跳转至quiz.html后无法修改页面文本，求解决方法

问题核心：跳转页面后，原页面的JS无法操作新页面的DOM——因为页面跳转后，原页面的执行上下文已被销毁，新页面是全新的独立环境。要实现需求，得通过跨页面传递数据，在目标页面（quiz.html）中读取数据后再修改DOM。

方案1：URL参数传递（简单直接） #

步骤1：修改首页的跳转逻辑 #

给跳转URL附加自定义文本参数，避免特殊字符解析错误：

// 首页按钮点击事件处理
document.querySelector("#goBtn").addEventListener("click", function() {
  // 定义要设置的欢迎文本
  const welcomeMsg = "欢迎来到答题页面！";
  // 编码后带参数跳转
  window.location.href = `quiz.html?msg=${encodeURIComponent(welcomeMsg)}`;
});

步骤2：在quiz.html中读取参数并修改DOM #

在quiz.html的脚本中，页面加载完成后解析参数并更新元素：

// quiz.html的脚本，建议放在<body>末尾或监听DOM加载完成事件
document.addEventListener("DOMContentLoaded", function() {
  // 解析URL中的查询参数
  const urlParams = new URLSearchParams(window.location.search);
  const welcomeMsg = urlParams.get('msg') || "欢迎！";
  // 修改目标元素文本
  document.getElementById("welcomeText").textContent = welcomeMsg;
});

方案2：localStorage存储（适合长内容/复杂格式） #

如果需要传递的内容较长或包含特殊格式，用localStorage更稳妥：

步骤1：首页存储文本 #

document.querySelector("#goBtn").addEventListener("click", function() {
  const welcomeMsg = "欢迎参与本次答题挑战！";
  localStorage.setItem("welcomeText", welcomeMsg);
  window.location.href = "quiz.html";
});

步骤2：quiz.html读取并清理存储（可选） #

document.addEventListener("DOMContentLoaded", function() {
  const welcomeMsg = localStorage.getItem("welcomeText") || "欢迎光临！";
  document.getElementById("welcomeText").textContent = welcomeMsg;
  // 可选：读取后清除存储，避免下次打开页面时重复使用旧内容
  localStorage.removeItem("welcomeText");
});

原代码失效原因 #

你之前的写法应该是在首页JS中尝试直接操作quiz.html的DOM——这是完全不可行的：两个页面属于独立的浏览器执行上下文，只有当目标页面加载完成后，它自身的JS才能操作自身的DOM元素。

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