Funkcja nie dodaje divów po wciśnięciu przycisku

pytanie zadane 8 stycznia 2022 w JavaScript przez castor_fiber Użytkownik (800 p.)

Witam jak w powyższym,

Prosty projekt do rysowania w js.

pętla działa za pierwszym razem ale kiedy chcę zresetować całość wciśnięciem przycisku (usuwa głównego diva w którym są dodane dzieci divy z pętli i dodaje nowego z tą sama klasą i odpala pętle, to pętla nie dodaje divow.

działanie - podajesz ilość kwadratów - które są divami ---> pętla rysuje siatkę po najechaniu na diva ten zmienia kolor (taki prosty paint) po wciśnięciu guzika ten powinien usunąć głównego diva z cala zawartością, stworzyć nowego o identycznej klasie --> poprosić o padanie ilości kwadratów przez prompt i odpalenie pętli która wyrysuje siatkę.

kod:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Etch a Sketch</title>
    <script src="skrypt.js" defer></script>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <button class="btn">Reset + Set up New grid</button>
    <div class="mainDiv"></div>
</body>
</html>

CSS:

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mainDiv {
    display: flex;
    flex: 1 1 auto;
    width: 960px;
    height: 960px;
    flex-direction: row;
    border: 10px solid darkgrey;
}
.divRow {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.pola {
    flex: 1;
    margin: 0px;
    background-color: rgb(255, 255, 255);
}

.polaColor {
    flex: 1;
    margin: 0px;
    background-color: black;
}
 .btn {
    width: 600px;
    height: 100px;
    font-size: 30pt;
    margin-bottom: 70px;
}

JS:

let numberOfSquares = 16;
let divNumber = 0;
let divMain = document.querySelector('.mainDiv');
let pola = document.querySelectorAll('pola');
let button = document.querySelector('button');


addDivs();

function addDivs() {
    numberOfSquares = Number(prompt('Podaj ilość pól w lini MAX = 100'));
    for (let i = 0; i < numberOfSquares; i++) {
        let divrow = document.createElement(`div`);
        divrow.classList.add(`divRow`);
        divrow.style.width = `${countingPixels()}px`;
        divrow.style.height = "960px";
        divMain.appendChild(divrow);

        for (let j = 0; j < numberOfSquares; j++) {
            let div = document.createElement('div');
            div.classList.add('pola');
            div.addEventListener("mouseenter", function (e) {
                div.classList.replace('pola', 'polaColor');
            })
            divrow.appendChild(div);
        };
        
        }
}

function countingPixels() {
    let pixels = 960/numberOfSquares;
    return pixels;
}

button.addEventListener('click', function (e) {
    removeMainDiv();
    addMainDiv();
    
    addDivs();
})

function removeMainDiv() {
    let body = document.body;
    body.removeChild(divMain);
} 

function addMainDiv() {
    let body = document.body;
    let mainDiv = document.createElement('div');
    mainDiv.classList.add('mainDiv');
    body.appendChild(mainDiv);
    
}

Z góry dzięki za poświęcony czas i pomoc.

Pozdrawiam

1 odpowiedź

odpowiedź 8 stycznia 2022 przez ScriptyChris Mędrzec (190,190 p.)

W konsoli po wciśnięciu przycisku resetującego jest błąd:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

W funkcji removeMainDiv posługujesz się zmienną divMain, którą tworzysz na początku skryptu. Natomiast po resecie (funkcja addMainDiv) tworzysz nowy odpowiednik tego diva i dodajesz go do body.

Problem polega na tym, że późniejsza próba resetu korzysta ze zmiennej divMain, która odnosi się do elementu już usuniętego z DOM, więc nie jest już dzieckiem body. Powinieneś w funkcji addMainDiv zaktualizować zmienną divMain zamiast wstawiać do DOM inną referencję (pod nową, lokalną zmienną mainDiv).

function addMainDiv() {
    let body = document.body;
    divMain = document.createElement('div'); // aktualizacja zmiennej `divMain` zamiast tworzenie nowej
    divMain.classList.add('mainDiv');
    body.appendChild(divMain);     
}

komentarz 8 stycznia 2022 przez ScriptyChris Mędrzec (190,190 p.)

Możesz też po prostu wyczyścić wnętrze elementu divMain przy jego usuwaniu, zamiast później tworzyć go od nowa i nadawać mu klasę (plus ewentualne inne atrybuty w przyszłości):

function removeMainDiv() {
    let body = document.body;

    /* czyszczenie na różne sposoby */
    divMain.replaceChildren();
    // divMain.innerHTML = '';
    // while (divMain.childElementCount) divMain.removeChild(divMain.children[0]);

    body.removeChild(divMain);
} 
 
function addMainDiv() {
    let body = document.body;
    body.appendChild(divMain);     
}