Если существуют два кода DOM, появляется ошибка, и код не запускается (но работает гладко, если каждый используется отдельно) - PullRequest
Новая
       23

Если существуют два кода DOM, появляется ошибка, и код не запускается (но работает гладко, если каждый используется отдельно)

0 голосов
/ 15 января 2020

Я только начал учиться кодировать. Я пытался взломать это почти 3 часа, и это почти 2 часа ночи, но безрезультатно ... Я был бы очень признателен за всю помощь, которую я могу получить.

Я пытаюсь написать код, где каждый раз нажатие назначенной кнопки добавит новый элемент в сетку CSS. Я понимаю, что нужен Evenlistener, и что DOM необходим.

Я понимаю, что если элемента вообще нет (dashboardQuantity == 0), код DOM для создания сетки CSS и первый Элемент сетки нужно будет запустить. И если существует хотя бы 1 CSS элемент сетки, код DOM добавит новые CSS элементы сетки перед старыми.

Как ни странно, оба кода не будут работать должным образом вместе: 1. Если в файле HTML я создал сетку CSS и первый элемент, а затем с помощью DOM добавил новый элемент перед старым, он работает.

Если я не добавляю код для сетки и первого элемента, а вместо этого запускаю код DOM, чтобы добавить сетку CSS и первый элемент, он также работает. Это раздел «если» ниже.

Но! Если я ничего не напишу в HTML и напишу весь код DOM (для сетки, первого элемента и новых элементов и далее), код вообще не будет работать. Это раздел «else if» ниже.

Кроме того, я могу добавить только один элемент из DOM, если код HTML имеет сетку CSS и первый элемент. Другими словами, я не могу добавить более 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);

Буду очень признателен за помощь ...! Заранее спасибо!

1 Ответ

0 голосов
/ 15 января 2020

Я не могу воспроизвести то, что вы пытаетесь сделать с тем, что было предоставлено. Но для решения этой проблемы вам необходимо прикрепить прослушиватель события click к элементу stati c, чтобы при добавлении новых элементов в 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>

Здесь я прикрепил родительский элемент, как указано выше, и мы выполняем функцию только в том случае, если выбран нужный идентификатор. 

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.

...