基于表单选择将div追加至另一div的实现问题

Hey there! Let's figure out why your selected div variable is coming up undefined, and fix that move functionality quickly. The core issue here is variable scope—you're probably declaring the variable that holds your selected div inside a local function (like a click handler), so it doesn't persist outside that context. Here are a few straightforward fixes to get this working:

Fix 1: Lift the variable to a shared scope #

Move your selected div variable out of the local function and into a scope that all your relevant code can access (like the global scope, or a module scope if you're using modules). This way, the variable retains its value between function calls.

// Declare the variable in a shared scope (not inside a handler)
let selectedDiv = null;

// Set up click handlers for your selectable divs
document.querySelectorAll('.selectable-div').forEach(div => {
  div.addEventListener('click', () => {
    // Clear previous selection styling (optional but helpful)
    if (selectedDiv) {
      selectedDiv.classList.remove('selected');
    }
    // Store the currently selected div
    selectedDiv = div;
    selectedDiv.classList.add('selected');
  });
});

// Handle the move action
document.getElementById('move-button').addEventListener('click', () => {
  if (selectedDiv) {
    // Get your target container
    const targetContainer = document.getElementById('target-container');
    // Move the selected div into the target
    targetContainer.appendChild(selectedDiv);
    // Reset the selected variable (optional)
    selectedDiv = null;
  } else {
    alert('Please select a div first!');
  }
});

Fix 2: Track selection with a DOM attribute (no extra variables) #

Instead of relying on a separate variable, mark the selected div directly using a DOM attribute or class. This avoids scope issues entirely by using the DOM itself to track state.

// Set up selection handlers
document.querySelectorAll('.selectable-div').forEach(div => {
  div.addEventListener('click', () => {
    // Deselect all other divs
    document.querySelectorAll('.selectable-div.selected').forEach(el => {
      el.classList.remove('selected');
      el.removeAttribute('data-selected');
    });
    // Mark current div as selected
    div.classList.add('selected');
    div.setAttribute('data-selected', 'true');
  });
});

// Handle move action
document.getElementById('move-button').addEventListener('click', () => {
  // Find the selected div via its attribute
  const selectedDiv = document.querySelector('.selectable-div[data-selected="true"]');
  
  if (selectedDiv) {
    const targetContainer = document.getElementById('target-container');
    targetContainer.appendChild(selectedDiv);
    // Clear the selection markers
    selectedDiv.classList.remove('selected');
    selectedDiv.removeAttribute('data-selected');
  } else {
    alert('Please select a div first!');
  }
});

Fix 3: Encapsulate state with a closure (cleaner for larger projects) #

If you want to avoid polluting the global scope, use a closure to wrap the selected state and expose only the necessary functions. This keeps your code modular and organized.

const divSelectionManager = (() => {
  let selectedDiv = null;

  return {
    selectDiv: (div) => {
      if (selectedDiv) selectedDiv.classList.remove('selected');
      selectedDiv = div;
      selectedDiv.classList.add('selected');
    },
    moveSelectedTo: (targetContainer) => {
      if (selectedDiv && targetContainer) {
        targetContainer.appendChild(selectedDiv);
        selectedDiv = null;
      }
    },
    getSelected: () => selectedDiv
  };
})();

// Bind events using the manager
document.querySelectorAll('.selectable-div').forEach(div => {
  div.addEventListener('click', () => divSelectionManager.selectDiv(div));
});

document.getElementById('move-button').addEventListener('click', () => {
  const targetContainer = document.getElementById('target-container');
  divSelectionManager.moveSelectedTo(targetContainer);
  
  if (!divSelectionManager.getSelected()) {
    alert('Div moved successfully!');
  } else {
    alert('Please select a div first!');
  }
});

Any of these approaches will fix the undefined variable issue and let you move the selected div into your target container. Pick the one that best fits your project's size and structure!

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