我刚开始学习如何编码。我已经尝试破解这个问题将近 3 个小时了，现在已经快凌晨 2 点了，但没有结果……我真的很感激我能得到的所有帮助。
我正在尝试编写每次单击指定按钮时都会在 CSS 网格中添加一个新元素的代码。我了解需要 evenlistener，并且需要 DOM。
我知道如果根本没有元素 (dashboardQuantity == 0)，则需要运行用于创建 CSS 网格和第一个网格元素的 DOM 代码。如果至少存在 1 个 CSS 网格项，DOM 代码将在旧的 CSS 网格项之前添加新的 CSS 网格项。
奇怪的是，这两个代码不能一起正常运行: 1. 如果在 HTML 文件中我创建了 CSS 网格和第一个元素，然后使用 DOM 在旧元素前面添加一个新元素，就可以了。
如果我不为网格和第一项添加代码，而是运行 DOM 代码来添加 CSS 网格和第一项，它也能正常工作。这是下面的“如果”部分。
但是!如果我不在 HTML 中编写任何内容并编写所有 DOM 代码(用于网格、第一个元素和以后的新元素)，代码将根本无法工作。这是下面的“else if”部分。
此外，如果 HTML 代码具有 CSS 网格和第一个元素，我只能从 DOM 添加一个元素。换句话说，我不能添加超过 2 个元素。这我真不知道为什么……
HTML代码(评论部分是CSS网格+第一项):
<body>
<button id="createDashboardButton"
class="main-action-button create-dashboard-button"></button>
<button id="rearrangeDashboardButton"
class="main-action-button rearrange-dashboard-button"></button>
<button id="deleteDashboardButton"
class="main-action-button delete-dashboard-button"></button>
<!--
<div id = dashboard-grid class="dashboard-grid">
<div class="dashboard-name">Dashboard 2</div>
</div>
-->
<script src="dom.js"></script>
</body>
对于JS文件(DOM):
var dashboardQuantity = 0
// --------------------------------------------------------------------
// First Dashboard Creation
var createFirstDashboardDiv = document.createElement("div");
createFirstDashboardDiv.id = "dashboard-grid";
createFirstDashboardDiv.className = "dashboard-grid";
var forFirstDashboardCreation = document.querySelector("#deleteDashboardButton");
var firstDashboard = document.querySelector("script");
// --------------------------------------------------------------------
// For Dashboard Creation
var createDashboardDiv = document.createElement("div");
var createDashboardTextNode = document.createTextNode("Dashboard " + dashboardQuantity);
createDashboardDiv.id = "dashboard" + dashboardQuantity;
createDashboardDiv.className = "dashboard-name";
createDashboardDiv.appendChild(createDashboardTextNode);
var forDashboardCreation = document.querySelector("#dashboard-grid");
var oldDashboard = document.querySelector("body .dashboardName");
// --------------------------------------------------------------------
// Functions
function createDashboard(){
if (dashboardQuantity == 0){
dashboardQuantity += 1;
forFirstDashboardCreation.parentNode.insertBefore(createFirstDashboardDiv,
firstDashboard.nextSibling);
document.getElementById("dashboard-grid").appendChild(createDashboardDiv);
} else if (dashboardQuantity > 0){
dashboardQuantity += 1;
forDashboardCreation.insertBefore(createDashboardDiv,
forDashboardCreation.firstChild);
}
}
对于点击按钮激活代码:
document.getElementById("createDashboardButton")
.addEventListener("click", createDashboard);
非常感谢您的帮助...!提前致谢!
最佳答案
我无法重现您尝试使用提供的内容执行的操作。但要解决此问题，您需要将点击事件监听器附加到静态元素，以便在将新元素附加到 DOM 时可以选择它们。这称为“事件委托(delegate)”。
<body>
<div id="static-parent">
<button id="createDashboardButton" class="main-action-button create-dashboard-button"></button>
<button id="rearrangeDashboardButton" class="main-action-button rearrange-dashboard-button"></button>
<button id="deleteDashboardButton" class="main-action-button delete-dashboard-button"></button>
<script src="dom.js"></script>
</div>
</body>
这里我已经如前所述附加到父级，我们只在点击我们想要的 id 时才执行函数。
var parent = document.getElementById("static-parent");
parent.addEventListener("click", function(event) {
if (event.target.id === "deleteDashboardButton") {
createDashboard();
}
});
您的代码有一个问题，您不能...
var forDashboardCreation = document.querySelector("#dashboard-grid");
它还不存在于 DOM 中。您需要使用您创建的元素，直到它被追加。所以你需要直接引用createFirstDashboardDiv而不是forDashboardCreation。
关于javascript - 如果存在两个 DOM 代码，则会出现错误并且代码不会运行(但如果每个单独使用，则运行顺利)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59756046/