首次点击事件触发后外部变量新值无法持久化问题求助

核心问题定位 #

你遇到的formMode和currentTodo在初始编辑后变回undefined的问题，最可能的原因是**ScreenController被多次调用**，导致多个实例的变量相互隔离：

• 初始加载时第一次调用ScreenController，渲染的卡片绑定了该实例的openEditForm，修改的是这个实例的formMode和currentTodo。
• 第二次调用ScreenController时，提交按钮的事件被重新绑定到新实例的submitForm，而这个新实例的formMode和currentTodo始终是初始值""，所以提交时会显示undefined。
• 提交过一次表单后，updateTodos重新渲染卡片，此时绑定的是新实例的openEditForm，变量终于共享，问题消失。

具体修复步骤 #

1. 确保ScreenController只执行一次

检查你的代码入口，确认ScreenController()只被调用了一次，避免重复实例化导致的变量隔离问题。

2. 优化事件绑定方式，移除不必要的bind(window)

将卡片的点击事件绑定改为箭头函数，保留词法作用域，避免this指向混淆：

// 原代码
card.addEventListener("click", openEditForm.bind(window, project, i));

// 修改为
card.addEventListener("click", () => openEditForm(project, i));

箭头函数会自动捕获当前updateTodos函数的作用域，确保openEditForm访问的是当前ScreenController实例的变量。

3. 用状态对象统一管理变量（可选，便于调试）

将分散的formMode和currentTodo整合为一个状态对象，方便追踪变量变化：

function ScreenController () {
  const todoForm = document.forms["new-todo-form"];
  const submitBtn = document.querySelector(".submit-btn");
  const contentDiv = document.querySelector(".content");
  
  // 用对象统一管理状态
  const state = {
    formMode: "",
    currentTodo: null
  };

  const openEditForm = function (project, index) {
    console.log("Open edit form");
    console.log({project, index});
    state.currentTodo = project.todos[index];
    todoForm.title.value = state.currentTodo.title;
    todoForm.description.value = state.currentTodo.description;
    todoForm.dueDate.value = state.currentTodo.getDueDate();
    todoForm.priority.value = state.currentTodo.priority;
    
    submitBtn.innerText = "Save task";
    state.formMode = "edit";
    console.log(state.formMode);
    toggleForm();
  }

  const submitForm = function () {
    todoForm.reportValidity();
    console.log(state.formMode);
    switch (state.formMode) {
      case "add":
        submitTodo();
        break;
      case "edit":
        editTodo(state.currentTodo);
        break;
    }

    toggleForm();
    updateTodos(defaultProject);
  }
}

4. 检查toggleForm函数的逻辑

确认toggleForm没有在关闭表单时意外重置formMode或currentTodo。如果需要重置，应该只在打开添加新任务表单时执行，而非所有关闭表单的场景：

// 示例：正确的toggleForm逻辑
function toggleForm() {
  const form = document.querySelector(".todo-form");
  form.classList.toggle("hidden");
  // 只有打开添加表单时才重置状态
  if (!form.classList.contains("hidden") && state.formMode !== "edit") {
    state.formMode = "add";
    state.currentTodo = null;
    todoForm.reset();
    submitBtn.innerText = "Add task";
  }
}

5. 调试追踪变量变化

在关键函数中添加日志，明确变量的修改路径：

• 在openEditForm末尾打印state.formMode和state.currentTodo
• 在submitForm开头打印同样的变量
• 在toggleForm中添加日志，确认是否有意外的变量修改

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