Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript] Przechwycenie wartości zmiennej, po zdarzeniu
Forum PHP.pl > Forum > Przedszkole
stellatus
Na stronie https://www.freuciv.com/ po naciśnięciu na przycisk "Tags" wysuwa się flyout z suwakiem. Chciałym, żeby po wykryciu suwaka szerokość flyouta została zwiększona o 300px. Napisałem więc taki skrypt:

Kod
function changeFlyoutSize() {
    const flyoutWrap = document.querySelector("div.facetwp-flyout-wrap")
    let a = flyoutWrap.offsetHeight
    let b = flyoutWrap.scrollHeight
    let widthStep = 300
    if (b > a) {
        let flyoutWidth = 300 + widthStep + "px"
        document.querySelector(".facetwp-flyout.active").style.width = flyoutWidth
        widthStep = widthStep + 300
    }
    console.log(b)
}
changeFlyoutSize()


Działa dobrze, ale interesuje mnie jeszcze przechwycenie wartości zmiennej "b" po zwiększeniu szerokości flyouta. Skrypt przechwytuje wartość przed zmianą szerokości. Nie wiem dlaczego tak się dzieje. Przecież console.log jest wpisany po warunku. Gdy uruchamiam skrypt ponownie, przechwytywana jest porządana wartość. To jest chyba dobry trop, ale i tak nie mam pomysłu co tu dalej wykombinować.
trueblue
A dlaczego miałby przechwytywać po? Przecież do zmiennej "b" zapisałeś wartość przed zmianą szerokości.
stellatus
Dzięki, racja! Więc wprowadziłem nową zmienną po warunku i efekt jest ten sam:

Kod
function changeFlyoutSize() {
    const flyoutWrap = document.querySelector("div.facetwp-flyout-wrap")
    let a = flyoutWrap.offsetHeight
    let b = flyoutWrap.scrollHeight
    let widthStep = 300
    if (b > a) {
        let flyoutWidth = 300 + widthStep + "px"
        document.querySelector(".facetwp-flyout.active").style.width = flyoutWidth
        widthStep = widthStep + 300
    }
    let bAfterSizeChange = flyoutWrap.scrollHeight
  console.log(bAfterSizeChange)
}
changeFlyoutSize()
trueblue
Poprawna wartość będzie dostępna dopiero po zakończeniu transition.
https://developer.mozilla.org/en-US/docs/We...sitionend_event
stellatus
Czyli po wyłączeniu transition powinno działać, ale nie działa.
trueblue
Na podanej stronie nadal jest transition.
stellatus
Chodziło mi o to, że w devtools można wyłączyć.
trueblue
Można to zrobić bez wyłączania wpisując po kolei w konsoli:

Kod
document.querySelector("div.facetwp-flyout-wrap").scrollHeight

Wynik: 3203
Kod
document.querySelector(".facetwp-flyout.active").style.width = "600px"

Kod
document.querySelector("div.facetwp-flyout-wrap").scrollHeight

Wynik: 1617
stellatus
Dzięki, chyba wątek zakończony. Ten ostatni kod jednak działa po wyłączeniu transiton i to mi wystarczy.
trueblue
A w jaki celu jest ta linijka:
Kod
widthStep = widthStep + 300

?
stellatus
Sorry, mój błąd, jest niepotrzebna.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.