如果存在两个 DOM 代码，则会出现错误并且代码不会运行（但如果每个单独使用，则可以顺利运行）答案

【问题标题】：If two DOM codes exist, error comes out and the code won't run (but run smoothly if each is used separately)如果存在两个 DOM 代码，则会出现错误并且代码不会运行（但如果每个单独使用，则可以顺利运行）
【发布时间】：2023-04-04 14:05:01
【问题描述】：

我刚开始学习如何编码。我已经尝试破解这个问题将近 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);

非常感谢您的帮助...！提前谢谢！

【问题讨论】：

您动态创建#dashboard-grid，然后在引用它之后立即。执行这样的操作需要监听器和事件委托，否则您的脚本不会知道它已添加到 DOM。

标签： javascript css dom createelement

【解决方案1】：

我无法重现您尝试使用所提供的内容进行的操作。但是要解决这个问题，您需要将单击事件侦听器附加到静态元素，以便在将新元素附加到 DOM 时可以选择它们。这称为“事件委托”。

<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。

【讨论】：