TheOdinProject待办项目：仅name输入框可取值其余为空的问题求助

核心问题 #

1. 全局选择器导致获取错误输入框：createTodos函数用document.querySelector从全局DOM找输入框，当页面存在多组相同class的输入框（比如多次点击不同项目）时，只会返回第一个匹配元素，导致获取的不是当前操作的输入框值，出现空字符串。
2. 未正确调用makeTodos函数：代码中projects[0].todos.push(makeTodos);是将函数本身存入数组，而非调用函数生成的Todo对象。

修复步骤 #

1. 修改createProject.js的提交事件逻辑

点击submit-todos按钮时，从当前inputContainer内获取输入框值，再传递给createTodos，同时避免重复生成输入容器：

function appendInputsAndButton(currentProject) {
  // 检查是否已存在输入容器，避免重复添加
  if (currentProject.querySelector('.input-container')) return;
  
  let inputContainer = document.createElement("div");
  inputContainer.className = "input-container";

  inputContainer.innerHTML = `<input class="name" placeholder="Todo名称"></input> 
                              <input class="description" placeholder="描述"></input>  
                              <input class="dueDate" type="date" placeholder="截止日期"></input>  
                              <input class="priority" placeholder="优先级"></input>
                              <button class="submit-todos">Submit</button> 
                              <button class="close">X</button> `;
  currentProject.appendChild(inputContainer);
  
  inputContainer.querySelector('.submit-todos').addEventListener('click', (event)=>{
    event.stopPropagation();
    // 从当前容器内获取输入值
    const name = inputContainer.querySelector('.name').value;
    const description = inputContainer.querySelector('.description').value;
    const dueDate = inputContainer.querySelector('.dueDate').value;
    const priority = inputContainer.querySelector('.priority').value;
    // 传递参数给createTodos
    createTodos(name, description, dueDate, priority);
    // 提交后移除输入容器
    currentProject.removeChild(inputContainer);
  })

  inputContainer.querySelector('.close').addEventListener('click',()=>{
    currentProject.removeChild(inputContainer);
  } )
}

2. 修改createTodos.js的函数逻辑

接收传递的参数，正确调用makeTodos生成Todo对象并添加到项目：

import { projects } from "./createProject"

function makeTodos (name, description, dueDate, priority){
    return {
        name: name,
        description: description,
        dueDate: dueDate,
        priority: priority,
    }
}

// 接收参数并处理
export function createTodos(name, description, dueDate, priority){
    console.log("createTodos function executed");
    console.log("Name:", name);
    console.log("Description:", description);
    console.log("Due Date:", dueDate);
    console.log("Priority:", priority);

    // 调用makeTodos生成对象后添加到项目（若要添加到当前点击的项目，可额外传递项目索引/对象）
    projects[0].todos.push(makeTodos(name, description, dueDate, priority));
    console.log("Updated Todos:", projects[0].todos);
}

可选优化 #

• 给dueDate设置type="date"，让日期输入更规范；给priority使用select下拉框或type="number"，提升交互体验。
• 修改createProject的渲染逻辑，避免用innerHTML = ""清空容器导致已添加的输入框丢失，可改为逐个追加新项目。

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