PyScript计数器示例按钮点击无响应问题咨询

运行PyScript计数器示例时，页面按钮可正常渲染，但点击后无计数更新的预期响应，VS Code检测到运行时报错，不确定是否需要额外安装依赖包。
该示例为Jeff Glass发布的PyScript相关文章中的首个计数器功能案例，运行环境为VS Code Live Server。

HTML文件代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, World!</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
        <p id="counter-target">Some Placeholder Text</p>
        <py-button>
                def on_click(event):
                        add_one()
        </py-button>
<py-script src="myscript.py"></py-script>
</body>
</html>

Python逻辑代码（myscript.py） #

internalCount = 0
target = "counter-target"
PyScript.write(target, str(internalCount), append=False)

def add_one():
    global internalCount
    internalCount += 1
    PyScript.write(target, str(internalCount), append=False)

运行报错截图 #

• 引用的是PyScript最早的Alpha测试版本资源，该版本的<py-button>标签语法、全局API规则和示例文章使用的预览版本不兼容：Alpha版不支持直接在<py-button>标签内嵌函数定义，全局也未暴露示例写法中调用的PyScript.write方法。
• 代码作用域拆分错误：<py-button>内联定义的点击回调与外部myscript.py文件不在同一个执行作用域，点击触发时无法找到add_one函数定义。
• 不存在缺失依赖包的问题，所有报错均来自版本API不匹配、写法不符合对应版本规范。

不需要安装任何额外依赖，按以下步骤修改代码即可正常运行：

• 替换PyScript资源引用为稳定版本，移除原Alpha版本的CSS、JS引用
• 修正<py-button>标签写法，通过标签属性绑定回调函数，不要在标签内嵌函数定义
• 统一Python逻辑到同一作用域，使用稳定版支持的DOM操作API

修复后可运行代码 #

HTML文件 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PyScript Counter</title>
    <link rel="stylesheet" href="https://pyscript.net/releases/2023.11.1/core.css">
    <script type="module" src="https://pyscript.net/releases/2023.11.1/core.js"></script>
</head>
<body>
        <p id="counter-target">Some Placeholder Text</p>
        <py-button pys-onClick="add_one">点击加1</py-button>
<py-script src="myscript.py"></py-script>
</body>
</html>

myscript.py文件 #

from pyscript import Element

internalCount = 0
target_el = Element("counter-target")
target_el.write(str(internalCount))

def add_one(*args):
    global internalCount
    internalCount += 1
    target_el.write(str(internalCount))

修改完成后刷新Live Server页面，按钮即可正常触发计数更新。

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