[HTML][JavaScript] Przechwycenie wartości zmiennej, po zdarzeniu |
[HTML][JavaScript] Przechwycenie wartości zmiennej, po zdarzeniu |
29.03.2020, 12:47:00
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
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ć. |
|
|
29.03.2020, 12:56:40
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
A dlaczego miałby przechwytywać po? Przecież do zmiennej "b" zapisałeś wartość przed zmianą szerokości.
-------------------- |
|
|
29.03.2020, 13:05:20
Post
#3
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
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() |
|
|
29.03.2020, 13:47:28
Post
#4
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Poprawna wartość będzie dostępna dopiero po zakończeniu transition.
https://developer.mozilla.org/en-US/docs/We...sitionend_event -------------------- |
|
|
29.03.2020, 14:59:26
Post
#5
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Czyli po wyłączeniu transition powinno działać, ale nie działa.
|
|
|
29.03.2020, 15:07:28
Post
#6
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Na podanej stronie nadal jest transition.
-------------------- |
|
|
29.03.2020, 15:08:45
Post
#7
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Chodziło mi o to, że w devtools można wyłączyć.
|
|
|
29.03.2020, 15:13:27
Post
#8
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
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 Ten post edytował trueblue 29.03.2020, 15:13:45 -------------------- |
|
|
29.03.2020, 16:55:56
Post
#9
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dzięki, chyba wątek zakończony. Ten ostatni kod jednak działa po wyłączeniu transiton i to mi wystarczy.
Ten post edytował stellatus 29.03.2020, 17:00:27 |
|
|
29.03.2020, 17:01:34
Post
#10
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
A w jaki celu jest ta linijka:
Kod widthStep = widthStep + 300 ? -------------------- |
|
|
29.03.2020, 17:39:42
Post
#11
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Sorry, mój błąd, jest niepotrzebna.
|
|
|
Wersja Lo-Fi | Aktualny czas: 26.04.2024 - 04:32 |