求助：基于PyScript的HTML整数乘法页面实现问题

可直接运行的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>整数乘法计算器</title>
    <!-- 引入PyScript依赖 -->
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <form onsubmit="return false">
        <label for="a">第一个整数</label><br>
        <input type="number" step="1" id="a" name="a" value=""><br>
        <label for="b">第二个整数</label><br>
        <input type="number" step="1" id="b" name="b" value=""><br>
        <input pys-onClick="multiply" type="submit" id="btn-form" value="计算">
    </form>
    <p>运算结果:</p>
    <p id='output'></p>

    <py-script>
        def multiply(*args, **kwargs):
            # 获取输入值并转为整数
            a = int(Element('a').value)
            b = int(Element('b').value)
            result_place = Element('output')
            # 计算并格式化输出结果
            result_place.write(f"{a} × {b} = {a * b}")
    </py-script>
</body>
</html>

关键修改说明 #

• 修正输入类型：HTML标准无integer输入类型，改用type="number"并添加step="1"，确保只能输入整数。
• 修复运算逻辑：原代码用{Element('a').value}创建集合对象，无法执行乘法；输入框的value默认是字符串，需通过int()转为整数后再计算，避免字符串重复拼接的错误行为。
• 语义化函数命名：将原函数名sub（减法语义）改为multiply，贴合乘法功能，提升代码可读性。
• 补充PyScript依赖：原代码缺少PyScript的CDN引入，必须添加CSS和JS文件才能让浏览器识别并运行PyScript代码。
• 优化表单属性：将两个输入框的name属性改为a和b，避免命名冲突，符合表单字段规范。

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