JavaScript基于数组生成每日切换复选框时复选框不显示问题

你的代码存在3个直接导致渲染异常的错误：

• 循环内未创建<li>节点就直接操作item变量，控制台会抛出item is not defined错误，阻断后续渲染，这是列表消失的根本原因。
• 创建复选框时未指定type="checkbox"属性，<input>默认type为text，所以只会显示普通文本输入框，不会出现复选框。
• dailyTasks数组定义写法不规范，在数组字面量内写set0 = ['xxx']属于隐式创建全局变量的写法，虽然临时访问不会报错，但非常容易出现索引错位、属性访问失败的问题。

完整可运行代码 #

<!-- 页面预留列表挂载容器 -->
<div id="list"></div>

<script>
// 修正数组定义，索引0-7直接对应每日任务集，不需要额外赋值全局变量
const dailyTasks = [
  ['Take the trash out', 'Check dishwasher', 'Let Daki out', 'Check indeed', 'Check email'],
  ['Check for milk', 'Check for coffee creamer'],
  ['Make tea', 'Go to bed early'],
  ['Apply for software jobs'],
  ['Check schedule at work', 'Check bank account', 'Pay bills'],
  ['Go to Chiropractor', 'Guild WvW night'],
  ['Work on coding projects, like this one', 'Do things with NODE'],
  ['Laundry', 'Movie night', 'Continue coding projects']
]

/**
 * 生成带复选框的每日任务列表
 * @param {Array} taskArray 当日任务数组
 * @returns HTMLUListElement
 */
function makeDailyList(taskArray) {
  const list = document.createElement('ul');
  for (let i = 0; i < taskArray.length; i++) {
    // 创建单个列表项
    const listItem = document.createElement('li');
    // 创建复选框
    const checkbox = document.createElement('input');
    // 必须指定type为checkbox，否则默认渲染为文本输入框
    checkbox.type = 'checkbox';
    checkbox.id = `task-${i}`;
    // 创建关联文本标签，点击文字也能触发勾选
    const taskLabel = document.createElement('label');
    taskLabel.htmlFor = `task-${i}`;
    taskLabel.textContent = taskArray[i];
    // 组装节点
    listItem.append(checkbox, taskLabel);
    list.appendChild(listItem);
  }
  return list;
}

const listContainer = document.getElementById('list');
// 自动根据当日星期加载对应任务：JS原生getDay()返回0为周日，1-6为周一到周六
// 如果需要把索引0对应周一，自己给返回值加1取余即可
const todayTaskIndex = new Date().getDay();
// 清空容器旧内容后挂载新列表
listContainer.innerHTML = '';
listContainer.appendChild(makeDailyList(dailyTasks[todayTaskIndex]));
</script>

实现说明 #

• 每日自动切换不需要常驻定时器，用户每次打开页面时自动读取当前日期匹配对应任务集即可，稳定性更高。
• 如果需要保存用户当日的勾选状态，可以在复选框change事件里把状态写入localStorage，每次加载当日任务时读取状态自动回显，跨天自动清空旧数据即可。

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