在PyScript中运行Python账单计算代码遇错误，求排查解决

你在PyScript中使用Python原生input()函数实现午餐费用计算时，遇到以下问题：

• 打开HTML文件弹出空输入框，看不到代码里的提示文本
• 点击「确定」或「取消」均触发报错

问题原因 #

1. input()的浏览器适配限制：PyScript在浏览器环境中调用input()时，无法将传入的提示文本（如"What was the total bill? RM "）显示在弹窗中，导致用户看到空输入框。
2. 未处理无效输入：点击「取消」时input()返回空字符串，直接转换为float/int会抛出ValueError；即使点击「确定」，空输入也会触发同样错误。

解决方案 #

方案1：添加异常处理（快速修复）

在获取输入时加入异常捕获，处理空输入或非数字输入的情况，同时通过print()提前显示提示文本（可通过页面右下角PyScript图标查看控制台输出）：

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    </head>
    <body>
        <py-script>
            print("Welcome to the Shen Ho's Lunch Expenses Calculator!")
            
            # 获取账单金额
            while True:
                print("What was the total bill? RM ")
                bill_input = input()
                if not bill_input:
                    print("请输入有效的数字，点击取消将退出程序")
                    continue
                try:
                    bill = float(bill_input)
                    break
                except ValueError:
                    print("输入无效，请输入数字")
            
            # 获取税率
            while True:
                print("How much percent of service tax in the bill? ")
                tax_input = input()
                if not tax_input:
                    print("请输入有效的数字，点击取消将退出程序")
                    continue
                try:
                    tax = int(tax_input)
                    break
                except ValueError:
                    print("输入无效，请输入整数")
            
            # 获取人数
            while True:
                print("How many people to split the bill? ")
                people_input = input()
                if not people_input:
                    print("请输入有效的数字，点击取消将退出程序")
                    continue
                try:
                    people = int(people_input)
                    break
                except ValueError:
                    print("输入无效，请输入整数")

            total_tax_amount = (bill * tax) / 100
            total_bill = bill + total_tax_amount
            bill_per_person = total_bill / people
            final_amount = round(bill_per_person, 2)

            print(f"Each person should pay: RM{final_amount}")
        </py-script>
    </body>
</html>

方案2：使用HTML表单交互（推荐，更符合Web体验）

完全抛弃input()弹窗，用HTML表单元素收集输入，结合PyScript操作DOM，用户体验更友好：

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
        <style>
            .calculator {
                max-width: 400px;
                margin: 20px auto;
                padding: 20px;
                border: 1px solid #ddd;
                border-radius: 8px;
            }
            .form-group {
                margin-bottom: 15px;
            }
            label {
                display: block;
                margin-bottom: 5px;
            }
            input {
                width: 100%;
                padding: 8px;
                box-sizing: border-box;
            }
            button {
                padding: 10px 20px;
                background-color: #007bff;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            #result {
                margin-top: 20px;
                padding: 10px;
                background-color: #f8f9fa;
                border-radius: 4px;
            }
        </style>
    </head>
    <body>
        <div class="calculator">
            <h3>Shen Ho's Lunch Expenses Calculator</h3>
            <div class="form-group">
                <label for="bill">Total Bill (RM):</label>
                <input type="number" id="bill" step="0.01" placeholder="Enter total bill">
            </div>
            <div class="form-group">
                <label for="tax">Service Tax (%):</label>
                <input type="number" id="tax" placeholder="Enter tax percentage">
            </div>
            <div class="form-group">
                <label for="people">Number of People:</label>
                <input type="number" id="people" min="1" placeholder="Enter number of people">
            </div>
            <button id="calculate">Calculate</button>
            <div id="result"></div>
        </div>

        <py-script>
            from pyscript import Element

            def calculate_expenses():
                # 获取输入元素
                bill_elem = Element("bill")
                tax_elem = Element("tax")
                people_elem = Element("people")
                result_elem = Element("result")

                try:
                    bill = float(bill_elem.value)
                    tax = int(tax_elem.value)
                    people = int(people_elem.value)

                    if people < 1:
                        result_elem.write("Error: Number of people must be at least 1")
                        return

                    # 计算费用
                    total_tax_amount = (bill * tax) / 100
                    total_bill = bill + total_tax_amount
                    bill_per_person = total_bill / people
                    final_amount = round(bill_per_person, 2)

                    result_elem.write(f"Each person should pay: <strong>RM{final_amount}</strong>")
                except ValueError:
                    result_elem.write("Error: Please enter valid numbers for all fields")

            # 绑定按钮点击事件
            Element("calculate").element.onclick = calculate_expenses
        </py-script>
    </body>
</html>

说明 #

• 方案1通过循环和异常处理，解决了无效输入导致的报错问题，同时用print()在PyScript控制台显示提示文本。
• 方案2使用标准的Web表单交互，用户可以直接在页面上输入，体验更流畅，符合Web应用的常规操作方式，推荐使用。

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