Forum PHP.pl > [JavaScript][HTML]toggle full screen, problem z wartościami SRC

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML]toggle full screen, problem z wartościami SRC

stellatus

14.06.2020, 13:02:53

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.

trueblue

14.06.2020, 13:34:32

W sumie to w tytule i w Twojej sugestii zawarłeś odpowiedź.

stellatus

14.06.2020, 16:10:46

OK, ale co jest nie tak z tymi relatywnymi src, że w funkcji nie działają?

trueblue

14.06.2020, 16:49:19

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.

stellatus

14.06.2020, 17:21:04

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.

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.