Problem z wysuwaniem diva za pomocą JS

pytanie zadane 12 lutego 2023 w HTML i CSS przez Verox2903 Nowicjusz (220 p.)
edycja 16 lutego 2023 przez Verox2903

Witam, mam problem. Mianowicie na stronie wstawiłem przycisk ze znakiem strzałki, który jest obok tytułu. Po kliknięciu w niego, za pomocą JS, dodaje do diva poniżej (opisu) klasę "active" i ten div się "pokazuje". Jest tylko mały szkopuł. Jak już div jest pokazany to jak kliknie się w jego obrębie, niekoniecznie na przycisk, to zamyka się On co naprawdę potrafi denerwować. Ktoś wie jak to naprawić w miarę łatwym kosztem? Z góry dzięki za pomoc.

komentarz 13 lutego 2023 przez VBService Ekspert (255,800 p.)

BTW masz błąd, dwa razy tag <html> [ git ]

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="src/style.css">
		<html lang="en">
		<meta charset="utf-8">
		<title>Project</title>

komentarz 13 lutego 2023 przez Verox2903 Nowicjusz (220 p.)

a faktycznie złe miejsce

1 odpowiedź

odpowiedź 12 lutego 2023 przez ScriptyChris Mędrzec (190,190 p.)

Na podstawie fragmentu:

        <div id="jeden">
            <div class="tytul-jeden">
                <p class="tytul-jeden-txt">Finland</p>&nbsp;<button id="button1">➯</button>
                    <script>
                        const button1 = document.querySelector('button');
                        const toggle1 = document.getElementById('jeden');
                        toggle1.onclick = function(){
                            toggle1.classList.toggle('active');
                            body1.classList.toggle('active');
                        }
                    </script>
            </div>
            <div class="tekst-jeden">
                <p>
		In the north of Finland, ...</p>
            </div>
            <div class="zdj-1">... </div>
        </div>

Podpinasz się na klik dla całego obszaru (który zawiera tytuł, strzałkę, obrazki), zamiast tylko na przycisk. Dlatego kliknięcie gdziekolwiek w jego obrębie - nawet na obrazek lub sam tytuł - powoduje (ro)zwijanie opisu. Podepnij się pod przycisk - i użyj do tego bardziej konkretnego selektora, bo w każdym skrypcie powielasz document.querySelector('button') co wszędzie pobiera ten sam button (pierwszy na stronie), zamiast konkretny związany z danym obszarem.

W przypadku takich powtarzalnych sekcji wygodniej by było zrobić jeden skrypt, który w pętli pobierze buttony (strzałki) i będzie odpowiednio togglował ich opisy, albo zastosowanie event delegation.

komentarz 12 lutego 2023 przez Verox2903 Nowicjusz (220 p.)

Jeden skrypt? Co przez to rozumiesz? Najlepiej by było coś na podobnej zasadzie działania bo nie musiałbym css zmieniać

komentarz 12 lutego 2023 przez ScriptyChris Mędrzec (190,190 p.)

Teraz masz trzy skrypty [1, 2, 3], które robią praktycznie to samo. Można je ujednolicić, choćby wspomnianą pętlą. A CSS nie ma tu nic do rzeczy.

komentarz 12 lutego 2023 przez Verox2903 Nowicjusz (220 p.)

Sczerze mówiąc próbowałem coś i nie wychodzi mi nic, próbowałem zrobić osobny plik index.js i nadal nie wchodzi. A z tymi pętlami to szczerze mówiąc nie mam pojęcia jak się za to zabrać , w JS za dużo nie robiłem i wychodzi przy właśnie takim czymś.

komentarz 12 lutego 2023 przez Verox2903 Nowicjusz (220 p.)

Dobra rozwiązałem prosto ten problem, podmieniłem że w querySelector() odnosze się do konkretnego id, i że nie toggle.onlick tylko button onlick.


const button2 = document.querySelector('#button2');
const toggle2 = document.getElementById('dwa');
button2.onclick = function(){
toggle2.classList.toggle('active');
body2.classList.toggle('active');}

komentarz 12 lutego 2023 przez ScriptyChris Mędrzec (190,190 p.)

Przykład pętli:

const buttons = document.querySelectorAll(
  '#button1, #button2, #button3'
);
const togglableElements = document.querySelectorAll(
  '#jeden, #dwa, #trzy'
);

buttons.forEach((btn, index) => {
  btn.onclick = function() {
     togglableElements[index].classList.toggle('active');
  };
});

Na marginesie: czy mi się wydaję, czy zmienna body2 (i pozostałe analogiczne z inną numeracją) u Ciebie nie istnieje ani nie masz żadnego elementu z takim id/name w HTML? Nie masz w konsoli błędu z tego powodu?