JS技术问题：无法将表单用户输入存储至全局变量

嘿，我明白你遇到的困扰了！咱们一步步拆解问题，找到根源和解决办法：

核心问题1：表单提交导致页面刷新，全局变量被重置 #

表单默认的提交行为会触发页面刷新，这意味着所有全局变量都会被重新初始化——你之前存进去的用户输入自然就没了。这是最容易踩的坑！

解决办法：阻止表单默认提交行为 #

在你的提交事件处理函数里，一定要加上event.preventDefault()，这样页面就不会刷新，全局变量的值也能稳稳保留下来。

核心问题2：创建p标签后无法获取内容 #

如果页面刷新了，你动态创建的p标签也会被清空；另外可能你插入p标签的方式不对，或者后续获取元素的时机、选择器有问题。

完整示例代码 #

咱们直接上可运行的代码，你可以对照着调整：

<!-- HTML部分：简单的姓名输入表单 -->
<form id="nameForm">
  <input type="text" id="nameInput" placeholder="请输入姓名">
  <button type="submit">提交</button>
</form>
<!-- 用来存放动态创建的p标签的容器 -->
<div id="contentContainer"></div>

// 提前声明全局变量
let globalUserName = "";

// 获取页面元素
const nameForm = document.getElementById("nameForm");
const contentContainer = document.getElementById("contentContainer");

// 监听表单提交事件
nameForm.addEventListener("submit", function(event) {
  // 1. 阻止默认提交行为，避免页面刷新
  event.preventDefault();
  
  // 2. 获取用户输入的姓名
  const userName = document.getElementById("nameInput").value;
  
  // 3. 把输入值存入全局变量
  globalUserName = userName;
  console.log("全局变量已更新：", globalUserName); // 控制台可验证
  
  // 4. 创建p标签并插入到页面指定位置
  const newP = document.createElement("p");
  newP.textContent = `你输入的姓名是：${userName}`;
  // 给p标签加唯一id，方便后续精准获取
  newP.id = "userNameP";
  contentContainer.appendChild(newP);
  
  // 可选：清空输入框，提升用户体验
  document.getElementById("nameInput").value = "";
});

// 后续获取p标签内容的示例（比如绑定到某个按钮点击事件）
function getPContent() {
  const userNameP = document.getElementById("userNameP");
  if (userNameP) {
    console.log("p标签内容：", userNameP.textContent);
    return userNameP.textContent;
  } else {
    console.log("还没有提交过姓名哦");
    return null;
  }
}

关键要点总结 #

• 表单提交事件里必须加event.preventDefault()，这是避免页面刷新、保留全局变量的核心。
• 全局变量要在函数外部提前声明，才能在函数内部赋值并持续保留。
• 动态创建的元素最好加唯一id，后续用getElementById就能精准获取，避免选择器出错。
• 后续获取元素的逻辑要在p标签创建之后触发（比如放在按钮点击事件里、提交事件完成后），不然元素还没生成，自然获取不到。

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