为什么在Django考勤应用中点击事件无法通过JavaScript设置隐藏输入框的值？

我一眼就看到了两个小问题，正是它们导致你选择"Absent"时无法给隐藏输入框赋值：

1. querySelector 拼写错误 #

JavaScript对大小写敏感，你写的 document.queryselector() 是错误的，正确的方法名是驼峰式拼写的 document.querySelector()（注意字母S是大写的）。小写的s会让浏览器认为这个方法不存在，自然没法修改输入框的值。

2. 缺少ID选择器的 # 前缀 #

你的隐藏输入框ID是 input_attendance{{staffs.id}}，通过ID获取DOM元素时，必须在选择器前加上 # 前缀，否则querySelector会找不到对应的元素。

修正后的核心代码 #

<input type="hidden" name="attendance{{staffs.id}}" id='input_attendance{{staffs.id}}'>

<script>
function attendance_absent(id) {
  let input_attendance = '#input_attendance' + id; // 加上#前缀
  document.querySelector(input_attendance).value = "absent"; // 修正拼写为querySelector
}
</script>

完整修正后的所有考勤状态函数 #

为了统一修复所有函数的问题，建议同步修改另外两个状态函数：

function attendance_present(id) {
  let per = '#present' + id;
  document.querySelector(per).textContent = "Present";
  document.querySelector(per).classList.remove("btn-outline-danger", "btn-outline-warning");
  document.querySelector(per).classList.add("btn-outline-primary");
  
  let input_attendance = '#input_attendance' + id;
  document.querySelector(input_attendance).value = "present"; // 修正拼写和选择器
}

function attendance_absent(id) {
  let per = '#present' + id;
  document.querySelector(per).textContent = "Absent";
  document.querySelector(per).classList.remove("btn-outline-primary", "btn-outline-warning");
  document.querySelector(per).classList.add("btn-outline-danger");
  
  let input_attendance = '#input_attendance' + id;
  document.querySelector(input_attendance).value = "absent"; // 修正拼写和选择器
}

function attendance_half_day(id) {
  let per = '#present' + id;
  document.querySelector(per).textContent = "Half-day";
  document.querySelector(per).classList.remove("btn-outline-primary", "btn-outline-danger");
  document.querySelector(per).classList.add("btn-outline-warning");
  
  let input_attendance = '#input_attendance' + id;
  document.querySelector(input_attendance).value = "half-day"; // 修正拼写和选择器
}

额外小优化：减少代码冗余 #

可以把重复的DOM操作逻辑抽成一个工具函数，让代码更简洁好维护：

function updateAttendance(id, status, btnClass) {
  // 更新按钮状态
  const btn = document.querySelector(`#present${id}`);
  btn.textContent = status;
  btn.classList.remove("btn-outline-primary", "btn-outline-danger", "btn-outline-warning");
  btn.classList.add(btnClass);
  
  // 更新隐藏输入框值
  const input = document.querySelector(`#input_attendance${id}`);
  input.value = status.toLowerCase().replace('-', '');
}

// 简化后的状态函数
function attendance_present(id) {
  updateAttendance(id, "Present", "btn-outline-primary");
}

function attendance_absent(id) {
  updateAttendance(id, "Absent", "btn-outline-danger");
}

function attendance_half_day(id) {
  updateAttendance(id, "Half-day", "btn-outline-warning");
}

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