单输入表单值传递正常，新增第二个输入后失效问题求助

嗨，我帮你找到了问题的根源，咱们一步步来解决：

核心问题拆解 #

你的代码里有两个关键问题，导致新增输入框后数据传递失效：

1. 跨页面执行JS引发报错：你的test.js同时在home.html和info.html中引入，但home.html里根本没有result和last这两个元素。当home.html加载test.js时，执行到获取这两个元素的代码会直接抛出错误，JS报错后会中断后续代码执行，导致passvalue函数无法正常工作（其实单个输入框时也有这个问题，只是没明显暴露出来）。
2. 表单默认提交行为未可靠阻止：提交按钮是type="submit"，仅靠按钮的onclick返回false，有时候表单的默认跳转行为还是会抢先触发，导致localStorage还没完成存储就跳走了。

修复后的完整代码 #

1. 修正test.js：区分页面执行逻辑 #

我们给代码加上页面判断，让不同页面只执行对应逻辑：

// 仅在home.html页面执行的逻辑
if (document.getElementById("sender")) {
  function passvalue() {
    const fname = document.getElementById("myname").value;
    const lname = document.getElementById("mlname").value;
    localStorage.setItem("textvalue", fname);
    localStorage.setItem("namevalue", lname);
    // 阻止表单默认提交行为
    return false;
  }
}

// 仅在info.html页面执行的逻辑
if (document.getElementById("result") && document.getElementById("last")) {
  document.getElementById("result").innerHTML = localStorage.getItem("textvalue");
  document.getElementById("last").innerHTML = localStorage.getItem("namevalue");
}

2. 优化home.html的表单提交逻辑（更可靠） #

把阻止默认行为的逻辑从按钮移到表单上，这样能更稳定地阻止跳转：

<html>
<head>
  <title>HOME PAGE</title>
</head>
<body>
  <h1>Transfer your name</h1>
  <!-- 给表单添加onsubmit事件，移除按钮的onclick -->
  <form action="info.html" onsubmit="return passvalue()">
    <input type="text" name="first" id="myname">
    <input type="text" name="last" id="mlname">
    <input type="submit" name="button" id="sender">
    <script type="text/javascript" src="test.js"></script>
  </form>
</body>
</html>

info.html保持原样即可，不需要修改。

为什么单个输入框时看似正常？ #

其实单个输入框时，test.js在home.html里依然会报错，但浏览器的错误提示可能没引起你的注意，且当时错误对passvalue的影响较小；新增第二个输入框后，错误的连锁反应被放大，直接导致功能完全失效。

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