• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
110 wizyt
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ź

+1 głos
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);     
}

 

komentarz 9 stycznia 2022 przez castor_fiber Użytkownik (800 p.)

@ScriptyChris, Dziękuję serdecznie za pomoc, to było takie oczywiste. Za długo już siedziałem i mój mózg już chyba nie był w stanie tego wyłapać.

Wielkie dzięki!

Podobne pytania

0 głosów
0 odpowiedzi 129 wizyt
0 głosów
1 odpowiedź 1,430 wizyt
0 głosów
2 odpowiedzi 262 wizyt

93,104 zapytań

142,080 odpowiedzi

321,591 komentarzy

62,446 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...