首次使用switch case对接API遇问题：打卡时间记录功能失效

我有4个按钮，点击后应分别显示签到、签退、午餐外出、午餐返回的当前时间，同时通过Fetch API记录这些时间。尝试用switch case区分不同活动类型，但无报错却未达到预期效果。

现有代码：

function handleClick(elementName) {

    var fieldName
    switch (elementName) { // #lblCheckin, #lblCheckout, ......
        case "#lbl-checkin":
            fieldName = 'checkInTime'
            break;
            
            case "#lbl-lunchout":
            fieldName = 'lunchOutTime'
            break;

            case "#lbl-lunchin":
            fieldName = 'lunchInTime'
            break;

            case "#lbl-checkout":
            fieldName = 'checkOutTime'
            break;
    
        default:
            throw new Error('Nao foi possivel armazenar o tipo de evento')
    }

    var label = document.querySelector(elementName)
    var now = new Date()
    var currentTime = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds()
    label.textContent = currentTime
    submitValues(fieldName, currentTime);
}


function submitValues(currentFieldName, currentTimeValue) {
    fetch('https://func-kxp-checkin-api-dev-01.azurewebsites.net/api/createCheckin', {
        method: 'POST',
        body: JSON.stringify({
            currentFieldName: currentTimeValue
        }),
        headers: {
          'Content-Type': 'application/json'
        }
      })
        .then(response => response.json())
        .then(data => console.log(data))
    }      

API返回的数据示例：

[
  {
    "currentFieldName": "17:32:30",
    "date": "2023-01-04"
  },
  {
    "currentFieldName": "17:35:11",
    "date": "2023-01-04"
  },
  {
    "currentFieldName": "17:40:48",
    "date": "2023-01-04"
  },
  {
    "currentFieldName": "17:40:49",
    "date": "2023-01-04"
  },
  {
    "currentFieldName": "17:40:50",
    "date": "2023-01-04"
  }
]

VSCode提示submitValues函数的currentFieldName参数未被读取，请问如何让功能正常工作？

核心问题出在对象字面量的键名写法：你在JSON.stringify里直接写currentFieldName: currentTimeValue，这里的键名会被当作固定字符串"currentFieldName"，而不是变量currentFieldName的值。这就是为什么API返回的所有记录键都是同一个，同时VSCode提示参数未被读取——引擎认为这个参数没被实际用到。

修复步骤：

• 使用方括号语法创建动态键名的对象，让变量currentFieldName的值作为请求体的键名
• 优化时间格式化逻辑，补零处理单个数字的时分秒，保证显示格式统一（比如9:5:3改为09:05:03）
• 新增错误捕获逻辑，方便排查请求失败的问题

function handleClick(elementName) {
    let fieldName;
    switch (elementName) {
        case "#lbl-checkin":
            fieldName = 'checkInTime';
            break;
        case "#lbl-lunchout":
            fieldName = 'lunchOutTime';
            break;
        case "#lbl-lunchin":
            fieldName = 'lunchInTime';
            break;
        case "#lbl-checkout":
            fieldName = 'checkOutTime';
            break;
        default:
            throw new Error('Nao foi possivel armazenar o tipo de evento');
    }

    const label = document.querySelector(elementName);
    const now = new Date();
    // 补零格式化时分秒
    const currentTime = [
        now.getHours().toString().padStart(2, '0'),
        now.getMinutes().toString().padStart(2, '0'),
        now.getSeconds().toString().padStart(2, '0')
    ].join(':');
    label.textContent = currentTime;
    submitValues(fieldName, currentTime);
}

function submitValues(currentFieldName, currentTimeValue) {
    // 用方括号语法生成动态键名的请求体
    const payload = {
        [currentFieldName]: currentTimeValue
    };
    fetch('https://func-kxp-checkin-api-dev-01.azurewebsites.net/api/createCheckin', {
        method: 'POST',
        body: JSON.stringify(payload),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error('提交失败:', err)); // 新增错误捕获
}

• 点击不同按钮后，API会收到对应字段名的记录（比如签到时是checkInTime: "09:05:03"）
• VSCode的参数未读取提示会消失，因为currentFieldName被正确用于生成请求体的键名
• 时间格式统一为两位数字的时分秒，显示更规范
• 新增的错误捕获可以快速排查网络请求或API返回的异常问题

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