Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Natálie
Člen
Avatar
Natálie:23.2.2018 19:51

Ahoj, začínám s JavaScriptem a decentně jsem se zasekla u tohoto projektu. Po kliknutí na tlačítko "Click me" bych chtěla, aby všechny obrázky s třídou .hide zmizely z obrazovky. Po kliknutí ale zmizí pouze jeden obrázek, druhý až po druhém kliknutí atd.
Neví někdo, co mi uniká, co dělám špatně?
Díky! :)

<!DOCTYPE html>
<html>
<head>
    <title>Fade Out</title>
    <meta charset="utf-8">
    <style>
        #button {
            padding: 15px;
            background-color: grey;
            margin: 0 35%;
            }

        img {
            opacity: 1;
            transition-duration: 3s;
            }
        .fadeOut {
            opacity: 0;
            }
    </style>

</head>
<body>

<img class="hide" src="1.jpg">
<img src="2.jpg">
<img class="hide" src="3.jpg">

<p id="button">Click me!</p>

<script>
    var button = document.getElementById("button");
        images = document.getElementsByClassName("hide");


    button.onclick = function() {
        for (const i = 0; i < images.length; i++) {
            images[i].setAttribute("class", "fadeOut");
        }
    };

</script>
</body>
</html>
 
Odpovědět
23.2.2018 19:51
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na Natálie
Peter Sciranka:23.2.2018 20:01

Ahoj, v cykle for používaš "const", namiesto toho použi "let" a malo by to fungovať :)

Nahoru Odpovědět
23.2.2018 20:01
Act as if it was Impossible to Fail
Avatar
Natálie
Člen
Avatar
Odpovídá na Peter Sciranka
Natálie:23.2.2018 20:19

Bohužel to nepomáhá. Ale díky za tip! ;)

 
Nahoru Odpovědět
23.2.2018 20:19
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na Natálie
Peter Sciranka:23.2.2018 20:29

To let určite nechaj a ešte si oprav v tom cykle

images[i].className = "fadeOut";

teraz by to už malo fungovať :)

Nahoru Odpovědět
23.2.2018 20:29
Act as if it was Impossible to Fail
Avatar
Natálie
Člen
Avatar
Odpovídá na Peter Sciranka
Natálie:24.2.2018 20:29

Pořád to nejede (nebo teda jede, ale ne tak, jak bych chtěla)... Říkám si, jestli není chyba někde jinde, ale nic moc mě nenapadá. ;)

 
Nahoru Odpovědět
24.2.2018 20:29
Avatar
Jindřich Máca
Tvůrce
Avatar
Odpovídá na Natálie
Jindřich Máca:24.2.2018 20:54

Ahoj, v moderním JavaScriptu by ten kód měl vypadat asi nějak takto:

<!DOCTYPE html>
<html>
<head>
        <title>Fade Out</title>
        <meta charset="utf-8">
        <style>
                #button {
                        padding: 15px;
                        background-color: grey;
                        margin: 0 35%;
                        cursor: pointer;
                }

                img {
                        opacity: 1;
                        transition-duration: 3s;
                }

                .fadeOut {
                        opacity: 0;
                }
        </style>
</head>
<body>
        <img class="hide" src="1.jpg">
        <img src="2.jpg">
        <img class="hide" src="3.jpg">

        <p id="button">Click me!</p>

        <script>
                const images = document.getElementsByClassName('hide');

                document.getElementById('button').addEventListener('click', () => {
                        for (let image of images)
                                image.setAttribute('class', image.getAttribute('class') + ' fadeOut');
                });
        </script>
</body>
</html>

A už by to mělo dělat to co chceš. Problém byl v tom, že změnou atributu class se rozbije to původní pole images. Standardně se tam proto ta nová třída pouze přidává. ;)

Kdyby jsi k tomu měla ještě nějaké dotazy, klidně se ptej. :)

 
Nahoru Odpovědět
24.2.2018 20:54
Avatar
Natálie
Člen
Avatar
Odpovídá na Jindřich Máca
Natálie:25.2.2018 7:43

Díky moc! :) A použití arrow function už je jen taková třešnička na dortu? ;)

 
Nahoru Odpovědět
25.2.2018 7:43
Avatar
Jindřich Máca
Tvůrce
Avatar
Odpovídá na Natálie
Jindřich Máca:25.2.2018 13:14

Ahoj, v tomhle případě ano, je to kratší než psát celé function. :-D Ovšem jsou situace kdy to tak být nemusí, protože arrow functions lépe pracují s kontextem this. K tomu se určitě během svého studia JavaScriptu dopracuješ. ;-)

 
Nahoru Odpovědět
25.2.2018 13:14
Avatar
Natálie
Člen
Avatar
Odpovídá na Jindřich Máca
Natálie:26.2.2018 13:38

Super! Děkuju moc všem za pomoc. :)

 
Nahoru Odpovědět
26.2.2018 13:38
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.