如何用JavaScript将second.html输入值传递至third.html的p标签？

你当前的代码逻辑存在一个关键错误：在second.html页面中尝试直接操作third.html的DOM元素是完全无效的。当你执行document.querySelector("#specials p")时，third.html还没有被浏览器加载，这个元素根本不存在，所以你的赋值操作相当于做了无用功，跳转后自然看不到内容。

下面给你两种可行的解决方案，按需选择：

方案1：通过URL查询参数传递值（最直观） #

这种方式会把输入值作为URL的一部分传递，然后在third.html里读取并显示。

修改second.html的JavaScript代码 #

function ticket() {
  const valueticket = document.getElementById("ticket2").value;
  // 用encodeURIComponent处理特殊字符，避免URL解析出错
  window.location.href = `third.html?ticket=${encodeURIComponent(valueticket)}`;
}

修改third.html的代码（添加读取参数的脚本） #

<div id="specials">
  <h1>third page</h1>
  <p></p> 
</div>
<script>
// 解析URL中的查询参数
const urlParams = new URLSearchParams(window.location.search);
const ticketValue = urlParams.get('ticket');

// 如果获取到值，就赋值给p标签
if (ticketValue) {
  document.querySelector("#specials p").textContent = ticketValue;
}
</script>

方案2：使用localStorage存储值（不暴露在URL中） #

如果不想把输入值显示在URL里，可以利用浏览器的localStorage临时存储数据，跳转后再读取。

修改second.html的JavaScript代码 #

function ticket() {
  const valueticket = document.getElementById("ticket2").value;
  // 将值存入localStorage
  localStorage.setItem('ticketValue', valueticket);
  window.location.href = "third.html";
}

修改third.html的代码 #

<div id="specials">
  <h1>third page</h1>
  <p></p> 
</div>
<script>
// 从localStorage读取值
const ticketValue = localStorage.getItem('ticketValue');

if (ticketValue) {
  document.querySelector("#specials p").textContent = ticketValue;
  // 可选：读取后删除存储的值，避免下次打开页面还显示旧内容
  localStorage.removeItem('ticketValue');
}
</script>

方案对比 #

• URL参数方案：简单直观，适合不需要保密的内容，缺点是值会暴露在地址栏中。
• localStorage方案：值不会显示在URL里，但数据会存在浏览器本地，记得用完及时清理避免残留。

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