Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][HTML]toggle full screen, problem z wartościami SRC
stellatus
post 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
Go to the top of the page
+Quote Post
trueblue
post 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ź.


--------------------
Go to the top of the page
+Quote Post
stellatus
post 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ą?
Go to the top of the page
+Quote Post
trueblue
post 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.



--------------------
Go to the top of the page
+Quote Post
stellatus
post 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
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 06:15