TestDome Customer List JavaScript挑战求助：实现邮箱切换显示与DOM元素追加（禁止仅使用原生JavaScript）

Hey there! Let's tackle this TestDome challenge step by step. Your current code has a few gaps that are keeping it from meeting all the requirements—let's break down what's off and build the correct implementation together.

First, let's spot the issues with your current code: #

• You can't mix innerHTML and appendChild() like that: appendChild() expects a DOM element, not a raw HTML string. Even using innerHTML += wouldn't handle the click interaction we need.
• The email <p> is rendered immediately, which breaks the "initial state hidden" rule.
• There's no logic to toggle the email's visibility when clicking the customer name.

Here's the corrected implementation that hits all the requirements: #

function showCustomers(customers, targetList) {
  // Clear the target list first to avoid duplicate entries
  targetList.innerHTML = '';

  customers.forEach(customer => {
    // Create the parent list item for each customer
    const listItem = document.createElement('li');

    // Create and add the name paragraph
    const namePara = document.createElement('p');
    namePara.textContent = customer.name;
    listItem.appendChild(namePara);

    // Add click handler to toggle email visibility
    namePara.addEventListener('click', () => {
      // Check if the email paragraph already exists in this list item
      const existingEmail = listItem.querySelector('.customer-email');
      if (existingEmail) {
        // Remove it if it's already present
        listItem.removeChild(existingEmail);
      } else {
        // Create and append the email paragraph if it doesn't exist
        const emailPara = document.createElement('p');
        emailPara.className = 'customer-email'; // Makes it easy to select later
        emailPara.textContent = customer.email;
        listItem.appendChild(emailPara);
      }
    });

    // Add the fully set up list item to the target list
    targetList.appendChild(listItem);
  });
}

Let's walk through how this works: #

1. Clears existing content: We empty the target list first to ensure we don't append new customers to old entries.
2. Builds DOM elements properly: Using document.createElement() instead of HTML strings is cleaner and safer for dynamic content.
3. Follows initial state rules: Only the customer's name is added to the DOM at first—no email element is present until the name is clicked.
4. Toggle logic: When the name is clicked, we check if the email paragraph exists in the parent list item:
   • If it does, we remove it from the DOM.
   • If it doesn't, we create the email paragraph and add it to the list item.

What the initial DOM looks like: #

After running the function with your sample customers, the starting DOM will match the required hidden state:

<ul id="customers">
  <li>
    <p>John</p>
  </li>
  <li>
    <p>Mary</p>
  </li>
</ul>

Clicking "John" will add his email paragraph, and clicking again will remove it—exactly matching the example you shared.

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