矩阵计算器的加减函数在首次调用后失效，根本原因是用同名变量（如 `add`、`sub`）意外覆盖了全局函数声明，导致后续点击按钮时调用的是数值而非函数。
该问题源于 JavaScript 的变量提升（hoisting）与作用域污染：在 add() 和 sub() 函数内部，你直接对 add 和 sub 赋值（例如 add = parseInt(...))，而这两个标识符原本指向全局函数。由于未使用 var/let/const 声明，JavaScript 将其视为对全局对象（window）属性的赋值，从而覆盖了原始函数引用。
一旦 add 被赋值为一个数字（如 5），再次点击 + 按钮时，onclick="add()" 实际尝试执行 5() —— 这会抛出 TypeError: add is not a function，但因内联事件处理的静默失败机制，控制台可能无明显报错，表现为“功能消失”。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
✅ 正确修复方式：避免命名冲突
将计算结果存入新声明的局部变量，而非复用函数名：
function add() {
let i = 1;
o.innerHTML = ''; // 使用 innerHTML 清空更可靠（textContent 会移除子元素）
const t = r * c; // 重新计算当前行列数下的总元素数，避免依赖过期的全局 t
for (i = 1; i <= t; i++) {
const aVal = parseInt(document.getElementById("a" + i).value) || 0;
const bVal = parseInt(document.getElementById("b" + i).value) || 0;
const result = aVal + bVal; // ✅ 关键：使用全新变量名 result
o.innerHTML += `<input type="number" value="${result}" readonly style="background:#f0f0f0;">`;
}
}
function sub() {
o.innerHTML = '';
const t = r * c;
for (let i = 1; i <= t; i++) {
const aVal = parseInt(document.getElementById("a" + i).value) || 0;
const bVal = parseInt(document.getElementById("b" + i).value) || 0;
const result = aVal - bVal; // ✅ 同样使用独立变量名
o.innerHTML += `<input type="number" value="${result}" readonly style="background:#f0f0f0;">`;
}
}? 其他关键优化建议
- 移除 this[...] 冗余写法：this["a"+i] 并未带来任何好处，反而易引发混淆；直接通过 document.getElementById() 获取值更清晰、安全。
- 防御性解析：使用 || 0 处理空输入或 NaN，防止计算中断。
- 动态更新 t：将 t = r * c 移入函数体内，确保每次运算基于用户最新设置的行列数。
- 避免重复 innerHTML +=：频繁 DOM 操作性能较差，可先构建完整 HTML 字符串再一次性赋值（示例中已体现）。
- 添加 readonly 与样式：输出框设为只读并弱化背景色，明确区分输入/输出区域。
? 总结
函数名是宝贵的标识符资源，绝不应被同名变量覆盖。遵循「函数名只用于定义和调用，计算结果用语义化新变量存储」原则，是避免此类静默崩溃的核心实践。同时，结合合理的错误处理与 DOM 操作优化，你的矩阵计算器即可稳定支持无限次加减运算。
