我的表单关联的JSON与JavaScript代码无法正常运行求助

先梳理你代码里的几个核心问题，我帮你逐一修复并解释：

存在的问题 #

• 表单默认提交行为未阻止：点击Sign Up按钮后，浏览器会默认刷新页面，导致你在formSave里处理的数据直接丢失，后续displayUid也拿不到数据。
• 代码语法不完整：formSave里的myUser对象定义到一半就中断了（"us...），这会直接触发语法错误，导致整个JS代码无法正常执行。
• displayUid函数未定义：页面上的Display按钮绑定了这个函数，但你没写实现逻辑，点击会报Uncaught ReferenceError。
• 变量作用域问题：uid和myUser是formSave的局部变量，就算页面不刷新，displayUid也访问不到这些变量。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>JSON</title>
</head>
<body>
    <div id="form">
        <form onsubmit="return formSave()" name="signup">
            <input type="text" name="username" placeholder="Enter username">
            <input type="submit" value="Sign Up">
        </form>
    </div>
    <button type="button" onclick="displayUid()">Display</button>
    <p id="demo"></p>

    <script>
        // 用全局变量存储用户数据，也可以用localStorage实现持久化
        let currentUser = null;

        function formSave() {
            // 阻止表单默认提交刷新行为
            event.preventDefault();
            
            // 获取输入框的用户名
            const username = document.forms["signup"]["username"].value;
            
            // 完整定义用户对象，这里用时间戳生成临时UID，可按需替换
            currentUser = {
                "username": username,
                "uid": Date.now()
            };
            
            // 可选：将用户数据转成JSON字符串存到本地存储，刷新页面也不会丢
            // localStorage.setItem('savedUser', JSON.stringify(currentUser));
            
            alert("用户信息已保存");
            return false; // 兼容旧浏览器的默认行为阻止
        }

        function displayUid() {
            const demoElement = document.getElementById("demo");
            if (currentUser) {
                demoElement.textContent = `用户名：${currentUser.username}，UID：${currentUser.uid}`;
                // 如果用了localStorage，可改成下面的逻辑：
                // const savedUser = JSON.parse(localStorage.getItem('savedUser'));
                // demoElement.textContent = `用户名：${savedUser.username}，UID：${savedUser.uid}`;
            } else {
                demoElement.textContent = "请先提交表单保存用户信息";
            }
        }
    </script>
</body>
</html>

修复说明 #

1. 阻止页面刷新：在formSave里添加event.preventDefault()，同时在onsubmit属性中返回false，确保表单提交后页面不会刷新，数据能保留。
2. 补全语法错误：完整定义了用户对象，还添加了UID的生成逻辑（用时间戳做示例，你可以换成自己的规则）。
3. 实现Display按钮逻辑：编写了displayUid函数，读取全局存储的用户数据并展示到页面上。
4. 解决作用域问题：用全局变量currentUser存储用户数据，也提供了localStorage的实现方案，让页面刷新后数据依然能保留。

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