PyScript双计算器按钮异常求助：第二个按钮失效

常见原因及修复方案 #

1. 元素标识重复或选择器不精准 #

如果两个计算器的按钮、输入框使用了相同的id，或者用querySelector这类选择器时没定位到对应元素，就会出现事件串连或无响应的情况。比如两个Solve按钮都用id="solve-btn"，或者用document.querySelector("button")只会选中第一个按钮，却错误给两个按钮绑定了同一事件。

修复：

• 给两个计算器的所有元素加唯一标识，比如整数计算器的按钮用id="int-solve-btn"，小数计算器的用id="dec-solve-btn"，输入框同理用int-num1、dec-num1这类命名
• 用精准选择器绑定事件：

from pyscript import document

def basicIntCalc():
    # 仅操作整数计算器的元素
    num1 = int(document.querySelector("#int-num1").value)
    num2 = int(document.querySelector("#int-num2").value)
    document.querySelector("#int-result").innerText = str(num1 + num2)

def basicDecCalc():
    # 仅操作小数计算器的元素
    num1 = float(document.querySelector("#dec-num1").value)
    num2 = float(document.querySelector("#dec-num2").value)
    document.querySelector("#dec-result").innerText = str(num1 + num2)

# 分别绑定对应按钮的点击事件
document.querySelector("#int-solve-btn").addEventListener("click", basicIntCalc)
document.querySelector("#dec-solve-btn").addEventListener("click", basicDecCalc)

2. PyScript Alpha版本的属性绑定Bug #

如果是用HTML的py-onClick属性绑定函数，比如：

<button py-onClick="basicIntCalc()">Solve</button>
<button py-onClick="basicDecCalc()">Solve</button>

PyScript早期alpha版本可能存在函数识别混淆的问题，导致事件串连或无响应。

修复：

• 放弃py-onClick属性绑定，改用上面的Python代码手动绑定事件
• 确认两个函数的命名完全独立，无拼写错误

3. 全局变量污染 #

如果两个函数共用了相同名称的全局变量，比如都用num1、num2，会导致计算逻辑互相干扰，出现串连触发的情况。

修复：

• 所有变量都定义在函数内部作为局部变量，确保两个函数的变量和操作元素完全隔离，互不影响

4. 检查控制台错误 #

打开浏览器开发者工具（F12）的Console面板，查看是否有元素找不到、类型转换失败等报错。这些隐性错误会导致函数执行中断，看起来就像按钮无响应。

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