使用JavaScript实现左右列表点击组合展示功能的技术问询

First, let's break down what was wrong with the original JavaScript code—there are a few key issues keeping it from working as intended:

• You can’t directly attach an event listener to an array created with Array.from(); you need to loop through each element to add listeners individually.
• Nesting click listeners inside each other is not the right approach here—we need to track selections from both sides independently, then combine them when either selection changes.
• document.getElementsByClassName('input') returns an HTMLCollection, so you need to grab the first matching element with [0] (or use querySelector('.input') for cleaner code).
• The span element wasn’t created before trying to use it, and the template string used single quotes instead of backticks (which is required for interpolating variables).

Here’s the corrected code that will properly display the combined selection when you click buttons from either side:

<ul class="left"> 
  <li><button>1</button></li> 
  <li><button>2</button></li> 
  <li><button>3</button></li> 
</ul>
<ul class="right"> 
  <li><button>a</button></li> 
  <li><button>b</button></li> 
  <li><button>c</button></li> 
</ul>
<div class="input"></div>

<script>
// Grab all buttons from left/right lists and the display container
const leftButtons = document.querySelectorAll('.left button');
const rightButtons = document.querySelectorAll('.right button');
const inputContainer = document.querySelector('.input');

// Track the currently selected values from each side
let selectedLeft = '';
let selectedRight = '';

// Update the display whenever a selection changes
function updateCombinedDisplay() {
  // Only show the combination if both sides have a selection
  if (selectedLeft && selectedRight) {
    // Create a new span for the combination
    const resultSpan = document.createElement('span');
    resultSpan.textContent = `${selectedLeft} & ${selectedRight}`;
    // Add a small gap between entries if you want to show multiple combinations
    resultSpan.style.marginRight = '12px';
    // Append the new result to the display container
    inputContainer.appendChild(resultSpan);
  }
}

// Attach click listeners to all left buttons
leftButtons.forEach(button => {
  button.addEventListener('click', () => {
    selectedLeft = button.textContent;
    updateCombinedDisplay();
  });
});

// Attach click listeners to all right buttons
rightButtons.forEach(button => {
  button.addEventListener('click', () => {
    selectedRight = button.textContent;
    updateCombinedDisplay();
  });
});
</script>

Quick notes on how this works: #

• We target the buttons directly (instead of list items) since that’s the element users will click.
• We use two variables to keep track of the latest selection from each side.
• The updateCombinedDisplay() function checks if both selections exist, creates a new span for the result, and adds it to the display area.

If you want to replace the existing result instead of appending new ones every time, modify the updateCombinedDisplay() function like this:

function updateCombinedDisplay() {
  if (selectedLeft && selectedRight) {
    // Clear existing content first
    inputContainer.innerHTML = '';
    const resultSpan = document.createElement('span');
    resultSpan.textContent = `${selectedLeft} & ${selectedRight}`;
    inputContainer.appendChild(resultSpan);
  }
}

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