如何用JavaScript在文本框间传值？新手遇document未定义/空错误

嘿，作为刚入门JS的开发者，碰到document相关的错误太正常啦！我来帮你拆解一下可能的原因和解决办法，一步步搞定两个文本框之间的数据传递~

1. 脚本执行时机太早，DOM还没加载完 #

这是新手最容易踩的坑！如果你的JS代码写在<head>标签里，或者页面顶部，浏览器还没渲染出文本框（也就是DOM节点还没生成），你就急着用document.getElementById()之类的方法找元素，自然会拿到null；要是你不小心在Node.js这类非浏览器环境跑代码，甚至会直接报document未定义。

解决办法：

• 把JS代码放到<body>标签的最底部，等所有DOM元素加载完再执行；
• 用DOMContentLoaded事件监听，确保DOM加载完成后再执行代码：

  document.addEventListener('DOMContentLoaded', function() {
    // 这里写你的文本框操作代码
    const input1 = document.getElementById('input1');
    const input2 = document.getElementById('input2');
    // 实时同步输入内容到另一个文本框
    input1.addEventListener('input', function() {
      input2.value = input1.value;
    });
  });
  

2. 元素ID写错了，或者根本不存在 #

仔细检查你的HTML里文本框的id是不是和JS里写的完全一致？比如HTML里是<input id="txtSource">，JS里写成了document.getElementById('txtsource')（大小写错误），或者你漏加了id属性，那肯定拿不到元素，返回null。

小技巧：打开浏览器控制台（F12），直接输入document.getElementById('你的ID')，看看能不能拿到对应的元素，快速排查ID问题。

3. 不小心在非浏览器环境运行代码 #

如果是在Node.js环境里跑这段代码，那document本来就不存在——Node是服务器端环境，没有浏览器的DOM对象。这种情况你要确保代码是在浏览器的HTML页面里运行的。

给你一个直接能用的小例子，你可以对照着改：

<!DOCTYPE html>
<html>
<head>
  <title>文本框数据传递</title>
</head>
<body>
  <input type="text" id="sourceInput" placeholder="输入内容">
  <input type="text" id="targetInput" placeholder="同步内容">

  <script>
    // 等DOM加载完成再执行逻辑
    document.addEventListener('DOMContentLoaded', function() {
      // 获取两个文本框元素
      const source = document.getElementById('sourceInput');
      const target = document.getElementById('targetInput');

      // 实时同步输入内容
      source.addEventListener('input', function() {
        target.value = source.value;
      });

      // 也可以用按钮触发传递（可选）
      // const transferBtn = document.createElement('button');
      // transferBtn.textContent = "传递内容";
      // document.body.appendChild(transferBtn);
      // transferBtn.addEventListener('click', function() {
      //   target.value = source.value;
      // });
    });
  </script>
</body>
</html>

• 确认HTML里确实有这两个文本框，且id完全匹配；
• 打开浏览器开发者工具（F12），看控制台的具体错误信息，能帮你更快定位问题；
• 如果之后学习框架（比如Vue/React），直接操作document不是最佳实践，但作为新手先搞懂原生JS的DOM操作也很关键~

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