如何用Brython实现输入姓名后隐藏表单并显示欢迎消息？

需要用Brython实现以下功能：

• 创建可输入姓名的表单
• 提交姓名后隐藏表单，同时显示包含Welcome, [name]的div（[name]为输入的姓名）

尝试了以下代码但未达到预期效果，还触发了错误：

from browser import document, html, window

storage = window.localStorage 
form = document.getElementById("name-form")
div = document.getElementById("welcome")
if storage["name"]:
    form.style.display = "none"
    div.style.display = "block"
else:
    form.style.display = "block"
    div.style.display = "none"

错误信息：

brython.js:6594 Uncaught dir
at Object.eval [as $factory] (eval at $B.$make_exc (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:7807:20), :5:15)
at $B.attr_error (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:7834:27)
at $B.JSObj.getattribute (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:9336:10)
at $B.$getattr (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:6582:9)
at b.dir (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:6322:35)
at offer_suggestions_for_attribute_error (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:7898:13)
at $B.error_trace (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:8031:117)
at $B.show_error (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:8038:42)
at $B.handle_error (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:8046:4)
at $B.loop (https://cdnjs.clou

1. 直接用storage["name"]访问localStorage会报错：当name键不存在时，返回的null在Brython中无法被直接当作对象访问属性，触发了dir错误。
2. 原代码缺少表单提交的处理逻辑，仅做了页面初始化的状态判断，没有实现提交姓名后的状态切换。

HTML结构 #

<!DOCTYPE html>
<html>
<head>
    <title>Brython Welcome Form</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython_stdlib.js"></script>
</head>
<body onload="brython()">
    <form id="name-form">
        <label for="name-input">请输入姓名：</label>
        <input type="text" id="name-input" required>
        <button type="submit">提交</button>
    </form>
    <div id="welcome" style="display: none;"></div>

    <script type="text/python">
        from browser import document, window

        def init_page():
            storage = window.localStorage
            form = document["name-form"]
            welcome_div = document["welcome"]

            # 安全获取本地存储中的姓名
            saved_name = storage.getItem("name")
            if saved_name:
                form.style.display = "none"
                welcome_div.textContent = f"Welcome, {saved_name}"
                welcome_div.style.display = "block"
            else:
                form.style.display = "block"
                welcome_div.style.display = "none"

        def handle_submit(event):
            event.preventDefault()  # 阻止表单默认跳转行为
            storage = window.localStorage
            form = document["name-form"]
            welcome_div = document["welcome"]
            name_input = document["name-input"]
            
            name = name_input.value.strip()
            if name:
                storage.setItem("name", name)
                form.style.display = "none"
                welcome_div.textContent = f"Welcome, {name}"
                welcome_div.style.display = "block"

        # 绑定表单提交事件
        document["name-form"].bind("submit", handle_submit)

        # 页面加载完成后初始化状态
        init_page()
    </script>
</body>
</html>

• 使用storage.getItem("name")替代直接索引访问，避免键不存在时的类型错误
• 添加handle_submit函数处理表单提交，阻止默认行为并将姓名保存到localStorage
• 页面加载时通过init_page函数根据存储状态切换表单和欢迎div的显示

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