）
" />
本文详解如何在 javascript 计算器中，通过“save”按钮将当前计算结果（经安全求值后）动态写入页面中指定的 `` 元素，实现数据从计算器到表单区域的无缝传递。
要在计算器中实现“Save”功能——即将当前显示的表达式计算结果写入 Hours worked this week:，关键在于：在点击“Save”时，对 display.innerText 进行安全求值，并更新目标 的文本内容。
但需特别注意：直接使用 eval() 存在严重安全风险（如执行恶意代码），因此推荐改用更安全的表达式解析方式。以下为优化后的完整实现方案：
✅ 正确实现步骤
- 为“Save”按钮添加处理逻辑：在 switch 语句中补全 case 'Save': 分支；
- 安全计算表达式：避免 eval()，改用简易数字运算解析（仅支持 +, -, *, /, 数字和小数点）；
- 更新目标元素：使用 document.getElementById('hours').textContent 设置新内容；
- 增强健壮性：处理空值、非法表达式、除零等边界情况。
? 推荐代码（含安全计算与错误处理）
// 安全计算函数：仅支持基础四则运算，无括号
function safeCalculate(expr) {
if (!expr || expr.trim() === '') return null;
// 简单校验：只允许数字、空格、小数点、+-*/ 和等号（忽略=）
const cleaned = expr.replace(/=\s*$/, '').trim();
const isValid = /^[\d\s+\-*/.]+$/.test(cleaned) && !/[+\-*/]{2,}/.test(cleaned);
if (!isValid) return NaN;
try {
// 使用 Function 构造器替代 eval（仍需谨慎，但比 eval 更可控）
// 注意：此处仅用于教学演示；生产环境建议用 math.js 或自定义解析器
return Function('"use strict"; return (' + cleaned + ')')();
} catch (e) {
return NaN;
}
}
let display = document.getElementById('display');
let buttons = Array.from(document.getElementsByClassName('button'));
buttons.forEach(button => {
button.addEventListener('click', (e) => {
const value = e.target.innerText;
switch (value) {
case 'C':
display.innerText = '';
break;
case '=':
const result = safeCalculate(display.innerText);
display.innerText = isNaN(result) ? 'Error' : String(result);
break;
case 'Save':
const saveResult = safeCalculate(display.innerText);
if (!isNaN(saveResult)) {
document.getElementById('hours').textContent =
`Hours worked this week: ${saveResult}`;
} else {
alert('Invalid expression — cannot save.');
}
break;
case '←':
if (display.innerText) {
display.innerText = display.innerText.slice(0, -1);
}
break;
default:
// 防止连续输入运算符（可选增强）
const lastChar = display.innerText.slice(-1);
if (['+', '-', '*', '/'].includes(value) && ['+', '-', '*', '/'].includes(lastChar)) {
display.innerText = display.innerText.slice(0, -1) + value;
} else {
display.innerText += value;
}
}
});
});⚠️ 重要注意事项
- 禁止在生产环境使用 eval()：原始答案中的 eval(display.innerText) 可被注入任意 JS 代码（如 alert('xss')），导致 XSS 漏洞；
- textContent 优于 innerText：前者更标准、性能更好，且不触发样式重排；
- 内容应保留前缀：如示例中 "Hours worked this week: " 是固定文案，动态值应拼接在其后，而非覆盖整个文本节点；
- 考虑单位与格式化：实际业务中建议限制小数位数（如 .toFixed(2)），并验证是否为非负数（工时通常 ≥ 0）；
- 无障碍友好：为“Save”按钮添加 aria-label="Save calculation result" 提升可访问性。
✅ 最终效果
点击“Save”后，页面中 将实时更新为：
Hours worked this week: 12.5（假设计算器显示 5*2.5 并已计算）
该方案兼顾功能性、安全性与可维护性，适用于学习型计算器及轻量级表单集成场景。
立即学习“前端免费学习笔记（深入）”；
