如何实现将计算器结果通过Save按钮传递到指定HTML span元素？

你需要在Save按钮的case分支中添加逻辑，将计算器的计算结果更新到id为hours的span元素中，同时注意修复分支穿透的问题（原代码中Save分支后没有break，会执行后面←的逻辑）。

修改后的JavaScript代码 #

let display = document.getElementById('display');
let hoursElement = document.getElementById('hours'); // 提前获取目标元素

let buttons = Array.from(document.getElementsByClassName('button'));

buttons.map( button => {
    button.addEventListener('click', (e) => {
        switch(e.target.innerText){
            case 'C':
                display.innerText = '';
                break;
            case '=':
                try{
                    display.innerText = eval(display.innerText);
                } catch {
                    display.innerText = "Error"
                }
                break;
            case 'Save':
                // 检查显示内容是否为有效结果，排除Error和空值
                const result = display.innerText.trim();
                if (result && result !== "Error") {
                    // 更新span文本，保留原有描述并追加计算结果
                    hoursElement.innerText = `Hours worked this week: ${result}`;
                } else {
                    // 可选：提示用户先完成有效计算
                    alert('请先完成有效计算，再点击保存');
                }
                break; // 必须添加break，避免执行后续分支
            case '←':
                if (display.innerText){
                   display.innerText = display.innerText.slice(0, -1);
                }
                break;
            default:
                display.innerText += e.target.innerText;
        }
    });
});

关键步骤说明 #

• 提前获取目标元素：把hours元素的获取放在事件监听外，避免每次点击都重复DOM查询，提升性能。
• 有效性检查：先判断计算器显示的内容是否为非空且不是错误信息，避免保存无效值。
• 更新文本内容：使用模板字符串拼接原有描述和计算结果，确保用户能看到完整的信息。
• 添加break：修复原代码的分支穿透问题，点击Save后不会触发删除字符的逻辑。

额外优化建议 #

• 如果你需要累计每周工时（而不是覆盖原有值），可以把结果转为数字后累加，比如：

  // 假设初始工时为0
  let totalHours = 0;
  // 在Save分支中：
  if (result && result !== "Error") {
      totalHours += parseFloat(result);
      hoursElement.innerText = `Hours worked this week: ${totalHours.toFixed(2)}`;
  }
  

• 避免使用eval：eval存在安全风险，建议使用更安全的表达式解析方式，比如第三方库或自己实现简单的计算逻辑。

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