所以我有一个 EJS，用于在我的 Web 应用程序上生成 CRUDS 操作的接口， 对于这个特定问题，数据库中现有用户的表使用正确的用户名及其相应的角色正确呈现，每个用户生成一行，并且当呈现页面时，它确实显示了正确的现有用户数量。
当我尝试再次检索用户名时，我很茫然，因为它显示为空， 目前数据库中有 10 个帐户，ejs 确实创建了 10 个表行。
EJS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../Styles/Manage.css">
<link rel="stylesheet" href="../Styles/css/all.css">
<link rel="icon" href="../Images/Seal.ico">
<script src="../Scripts/Manage.js"></script>
<title>Manage</title>
</head>
<body>
<div class="Header-Container">
<header class="Header">
<img src="../Images/SchoolLogo.png">
<div class="Search-Bar">
<form role="search" action="/search/" class="search"></form>
<div class="Search-Container">
<input type="text" class="Search-Field" id="SearchField" placeholder="Search">
<button type="submit" class="Search-Button" id="SubmitButton"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
<div class="Header-Nav">
<nav>
<ul>
<li id="new">New</li>
<li id="articles">Articles</li>
<li id="books">Books</li>
<li id="about">About Us</li>
</ul>
</nav>
</div>
</div>
</div>
<a href="../Teacher-Pages/Manage.html" class="BtnAnchor"><button id="Upload" class="UploadBtn"><i class="fa-2x fa-solid fa-upload"></i></button></a>
<a href="" class="BtnAnchor"><button class="AccountBtn"><i class=" fa-2x fa-solid fa-user"></i></button></a>
<button id="Logout" class="LogoutBtn"><i class="fa-2x fa-solid fa-right-from-bracket"></i></button>
</header>
</div>
<div class="User-Section">
<div class="Table-Container">
<h1>Users</h1>
<table class="User-Table">
<tr>
<th>Username</th>
<th>Role</th>
<th>Actions</th>
</tr>
<% users.forEach(user => { %>
<tr>
<td class="Username-Field"><%= user.username %></td>
<td><%= user.role %></td>
<td>
<button class="DeleteBtn" data-username="<%= user.username %>" id="deleteBtn">A</button>
</td>
</tr>
<% }); %>
</table>
</div>
</div>
<div class="Side-Panel">
</div>
</body>
</html>
前端Js：
document.addEventListener('DOMContentLoaded', () => {
const deleteButtons = document.querySelectorAll('.DeleteBtn');
deleteButtons.forEach((button) => {
button.addEventListener('click', async (event) => {
const username = event.target.getAttribute('data-username');
console.log(username); //returns null
try {
const response = await fetch(`/api/delete-user/${username}`, {
method: 'DELETE',
});
if (response.ok) {
event.target.closest('tr').remove();
} else {
console.error('Failed to delete user');
}
} catch (error) {
console.error('Error:', error);
}
});
});
});
我知道您已经有了解决问题的方法，但您不需要每个按钮都有一个事件侦听器。只需将所有内容包装在一个表单中，并让所有删除按钮具有
buttondocument.addEventListener('DOMContentLoaded', e => {
document.forms.form01.addEventListener('click', e => {
let name = e.target.name;
switch (name) {
case 'delete':
const username = e.target.dataset.username;
// do stuff to delete
console.log(username);
break;
}
});
});<form name="form01">
<button type="button" name="delete" data-username="a1">Delete a1</button>
<button type="button" name="delete" data-username="a2">Delete a2</button>
</form>