如何将文本框值传递到另一个HTML页面？

你的思路完全没问题，只是几个关键细节没处理到位，导致用户名无法正常传递填充。我帮你梳理下问题点并给出完整的修正方案：

核心问题排查 #

• 首页跳转逻辑未绑定：你写了onClickHandler函数，但没把它绑定到"FINISH SETTING UP PROFILE"的点击事件上，点击链接时直接跳转，根本没执行JS拼接参数的逻辑。
• 目标页面初始化函数未触发：onLoadHandler函数定义了，但没设置页面加载时自动执行，所以不会读取URL参数填充输入框。
• 缺少特殊字符处理：如果用户名包含空格、&这类特殊字符，直接拼接URL会导致参数解析出错。

分步修正方案 #

1. 修复首页的跳转触发逻辑 #

把首页的链接改成按钮（或保留链接但阻止默认跳转），手动绑定点击事件，确保跳转时带上用户名参数：

• 移除a标签的默认href，改用JS控制跳转
• 给按钮绑定onClickHandler函数

2. 让目标页面自动执行初始化函数 #

在createUser.js中，设置页面加载完成后自动调用onLoadHandler，可以用window.onload事件实现。

3. 优化参数传递与解析 #

用encodeURIComponent编码用户名，避免特殊字符破坏URL结构；解析参数时也做容错处理，避免参数不存在时报错。

完整修正代码 #

homepage.html #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
  <input type="text" id="username" placeholder="Enter your username"><br><br>
</form>
<!-- 改用按钮绑定点击事件，避免默认跳转 -->
<button id="createUserBtn">FINISH SETTING UP PROFILE</button>
<script src="homepage.js"></script>
</body>
</html>

homepage.js #

function onClickHandler(){
  // 编码用户名，处理空格、特殊字符等情况
  const username = encodeURIComponent(document.getElementById('username').value);
  location.href = `createUser.html?name=${username}`;
}

// 给按钮绑定点击事件
document.getElementById('createUserBtn').addEventListener('click', onClickHandler);

createUser.html #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FINISH FILLING OUT INFO</h2>
<form>
  <input type="text" id="username" placeholder="Username"><br><br>
  <!-- 补充你需要的其他输入框 -->
  <input type="password" id="password" placeholder="Password"><br><br>
  <input type="number" id="age" placeholder="Age"><br><br>
  <select id="gender">
    <option value="">Select Gender</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
</form>
<script src="createUser.js"></script>
</body>
</html>

createUser.js #

function parseQueryString(){
  const queryDict = {};
  // 处理空查询字符串的情况，避免报错
  if (location.search) {
    location.search.substr(1).split("&").forEach(function(item) {
      const [key, value] = item.split("=");
      // 解码参数值，还原原始用户名
      queryDict[key] = decodeURIComponent(value || '');
    });
  }
  return queryDict;
}

function onLoadHandler(){
  const queryParams = parseQueryString();
  // 如果存在name参数，填充到输入框
  if (queryParams.name) {
    document.getElementById('username').value = queryParams.name;
  }
}

// 页面加载完成后自动执行初始化函数
window.onload = onLoadHandler;

现在你再测试一下：在首页输入用户名（比如Sarah或者带空格的Sarah Miller），点击按钮跳转后，createUser页面的用户名输入框会自动填充内容，同时用户依然可以编辑它，特殊字符也能正常处理。

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