待办应用开发求助：新增li元素时Radio button重复生成

问题根源 #

你当前的代码逻辑存在问题：每次按下回车键，都会选中页面上所有已存在的li元素，然后给每个li都追加一个radio按钮。这就导致之前创建的旧li会被反复添加radio，自然出现重复的情况。

解决方案 #

只需要给刚创建的那个新li添加radio按钮就行，不用遍历所有li。同时可以优化几个细节：调整radio和文本的顺序、清空输入框避免重复提交。

修改后的JavaScript代码：

// 选择输入框
const inputField = document.querySelector('#input-field');

// 给输入框添加键盘按下事件监听
inputField.addEventListener('keydown', (event) => {
  // 判断是否按下回车键
  if (event.keyCode === 13) {
    // 获取输入框的值，先去除首尾空格
    const inputFieldValue = inputField.value.trim();
    // 如果输入为空，直接返回，不创建任务
    if (!inputFieldValue) return;

    // 创建新的li元素
    const liElement = document.createElement('li');

    // 创建radio按钮
    const inputElement = document.createElement('input');
    inputElement.setAttribute('type', 'radio');
    inputElement.setAttribute('name', 'radio-group');
    inputElement.setAttribute('value', inputFieldValue);

    // 创建文本节点，避免直接用textContent覆盖子元素
    const textNode = document.createTextNode(inputFieldValue);

    // 把radio和文本添加到li里，调整顺序让radio在前面
    liElement.appendChild(inputElement);
    liElement.appendChild(textNode);

    // 把li添加到ul里
    const ulElement = document.querySelector('#list');
    ulElement.appendChild(liElement);

    // 清空输入框，聚焦回去，提升体验
    inputField.value = '';
    inputField.focus();
  }
});

代码说明 #

• 移除了document.querySelectorAll('li')和遍历逻辑，只针对当前新创建的li操作
• 增加了输入内容的空值判断，避免创建空的待办项
• 用createTextNode添加文本，防止直接设置textContent会覆盖掉刚创建的radio元素
• 新增清空输入框并重新聚焦的逻辑，方便连续添加任务
• 调整了radio和文本的顺序，符合待办项的常规展示方式

HTML代码不需要修改，保持原样即可。

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