如何在JavaScript中实现点击按钮/菜单栏选项时显示新界面及添加用户功能开发求助

Hey there! I see you're building a contact management page and want to add a feature where clicking the "Add" menu option brings up a form to input new user details. Let's break down how to implement this smoothly with your existing code.

Step 1: Add the Hidden Form to Your HTML #

First, we'll add a form section that's hidden by default. Place it inside your .contact-container so it integrates with your existing layout:

<div class="contact-container">
  <div class="navbar">
    <ul id="menuList">
      <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png"/>
    </ul>
  </div>
  <!-- Add User Form (hidden by default) -->
  <div class="add-user-form" id="addUserForm" style="display: none;">
    <h3>Add New User</h3>
    <form id="userForm">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" required>
      </div>
      <div>
        <label for="officeId">Office ID:</label>
        <input type="text" id="officeId" required>
      </div>
      <div>
        <label for="phoneNumber">Phone Number:</label>
        <input type="tel" id="phoneNumber" required>
      </div>
      <button type="submit">Add User</button>
      <button type="button" id="cancelBtn">Cancel</button>
    </form>
  </div>
  <div class="users" id="usersList">
  </div>
</div>

Step 2: Update Your JavaScript to Handle Interactions #

Next, modify your JS to add click listeners to menu items, toggle the form's visibility, and handle form submissions to add new users. We'll also create a reusable function to refresh the user list:

let menu = ["View", "Add", "Verify", "Update", "Delete"];
let list = document.getElementById("menuList");
let usersList = document.getElementById("usersList");
let addUserForm = document.getElementById("addUserForm");
let userForm = document.getElementById("userForm");
let cancelBtn = document.getElementById("cancelBtn");

let users = [
  { name: "Jan", id: "1", number: "111-111-111" },
  { name: "Juan", id: "2", number: "222-222-222" },
  { name: "Margie", id: "3", number: "333-333-333" },
  { name: "Sara", id: "4", number: "444-444-444" },
  { name: "Tyrell", id: "5", number: "555-555-555" },
];

// Reusable function to render the user list
function renderUsers() {
  let div = "<div class='infor'>";
  users.forEach(user => {
    div += "<div class='user-informations'>";
    div += `<p>${user.name}</p>`;
    div += `<p>${user.id}</p>`;
    div += `<p>${user.number}</p>`;
    div += "</div>";
  });
  div += "</div>";
  usersList.innerHTML = div;
}

// Render initial user list
renderUsers();

// Populate menu items and attach click listeners
menu.forEach((item) => {
  let li = document.createElement("li");
  li.innerText = item;
  
  li.addEventListener("click", () => {
    // Reset view: hide form, show user list by default
    addUserForm.style.display = "none";
    usersList.style.display = "block";
    
    if (item === "Add") {
      // Show form and hide user list when "Add" is clicked
      addUserForm.style.display = "block";
      usersList.style.display = "none";
    } else if (item === "View") {
      // Refresh the user list when "View" is clicked
      renderUsers();
    }
    // You can add logic for other menu items (Verify, Update, Delete) later
  });
  
  list.appendChild(li);
});

// Handle form submission to add a new user
userForm.addEventListener("submit", (e) => {
  e.preventDefault(); // Stop page reload
  
  // Grab form values
  let name = document.getElementById("name").value;
  let officeId = document.getElementById("officeId").value;
  let phoneNumber = document.getElementById("phoneNumber").value;
  
  // Add new user to the array
  users.push({
    name: name,
    id: officeId,
    number: phoneNumber
  });
  
  // Reset form, switch back to user list, and refresh the list
  userForm.reset();
  addUserForm.style.display = "none";
  usersList.style.display = "block";
  renderUsers();
});

// Handle cancel button click to close the form
cancelBtn.addEventListener("click", () => {
  userForm.reset();
  addUserForm.style.display = "none";
  usersList.style.display = "block";
});

Step 3: Add Basic CSS (Optional but Recommended) #

To make the interface look polished, add this CSS to style the layout and form:

.contact-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.navbar ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.navbar li {
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
}

.navbar li:hover {
  background-color: #f0f0f0;
}

.user-informations {
  border: 1px solid #eee;
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
}

.add-user-form {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.add-user-form form div {
  margin-bottom: 15px;
}

.add-user-form label {
  display: inline-block;
  width: 100px;
  margin-right: 10px;
}

.add-user-form input {
  padding: 5px;
  width: 200px;
}

.add-user-form button {
  margin-right: 10px;
  padding: 5px 15px;
  cursor: pointer;
}

Key Notes: #

• renderUsers() Function: This reusable function generates the user list HTML. We call it initially and after adding a new user to keep the list updated.
• Menu Click Logic: Each menu item triggers a view switch. Clicking "Add" shows the form and hides the user list; other items revert back to the list view.
• Form Handling: We prevent the default page reload on submission, add the new user to the array, and refresh the list to display the new entry.
• Cancel Button: Resets the form and switches back to the user list without saving changes.

This implementation fits right into your existing codebase and gives you the add-user functionality you need. You can extend it later with logic for the other menu items using similar patterns!

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