[JavaScript][HTML]toggle full screen, problem z wartościami SRC |
[JavaScript][HTML]toggle full screen, problem z wartościami SRC |
14.06.2020, 13:02:53
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dlaczego tutaj przełączanie pomiędzy obrazkami działa prawidłowo:
http://srv19859.microhost.com.pl/aplikacja/test2.html Kod <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8" /> <style> img { height: 24px; } </style> </head> <img id="fullscreen-icon" src="https://image.flaticon.com/icons/svg/2089/2089746.svg"> <script> var x = document.getElementById('fullscreen-icon') function myFunction() { if (x.src == "https://image.flaticon.com/icons/svg/2089/2089746.svg") { x.src = "https://image.flaticon.com/icons/svg/1/1126.svg" } else { x.src = "https://image.flaticon.com/icons/svg/2089/2089746.svg" } } document.getElementById("fullscreen-icon").addEventListener("click", myFunction) </script> </html> a tutaj nie nie działa? http://srv19859.microhost.com.pl/aplikacja/test.html Kod <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8" /> <style> img { height: 24px; } </style> </head> <img id="fullscreen-icon" src="https://image.flaticon.com/icons/svg/2089/2089746.svg"> <script> var x = document.getElementById('fullscreen-icon') function myFunction() { if (x.src == "icons/expand.png") { x.src = "icons/exit.png" } else { x.src = "icons/expand.png" } } document.getElementById("fullscreen-icon").addEventListener("click", myFunction) </script> </html> Przykłady róznią się tylko wartościami SRC. Ten post edytował stellatus 14.06.2020, 13:05:40 |
|
|
14.06.2020, 13:34:32
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
W sumie to w tytule i w Twojej sugestii zawarłeś odpowiedź.
-------------------- |
|
|
14.06.2020, 16:10:46
Post
#3
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
OK, ale co jest nie tak z tymi relatywnymi src, że w funkcji nie działają?
|
|
|
14.06.2020, 16:49:19
Post
#4
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
A poza funkcjami działają działają? Skąd takie stwierdzenie?
Warto sprawdzić co zawiera właściwość src. https://www.w3schools.com/jsref/prop_img_src.asp Przy okazji porównaj co zwraca metoda getAttribute. Naprawdę łatwo odnaleźć te informacje w Google. -------------------- |
|
|
14.06.2020, 17:21:04
Post
#5
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Działają. Po wpisaniu w konsoli:
Kod x.src = 'icons/exit.png' obrazek się zmienia, a x.getAttribute('src') zwraca to samo co x.src.Edycja: OK, zrobiłem tak i działa: Kod var x = document.getElementById('fullscreen-icon') function myFunction() { if (x.getAttribute('src') == "icons/expand.png") { x.src = "icons/exit.png" } else { x.src = "icons/expand.png" } } document.getElementById("fullscreen-icon").addEventListener("click", myFunction) Ale dlaczego? OK, wszystko się zgadza. x.getAttribute('src') nie zwraca tego samego co x.src. Dzięki. Ten post edytował stellatus 14.06.2020, 17:24:56 |
|
|
Wersja Lo-Fi | Aktualny czas: 27.04.2024 - 17:50 |