Jak napisać funkcję, aby tekst po kliknięciu zmieniał się na kolejny? [JavaScript]

pytanie zadane 3 maja 2019 w JavaScript przez Koniuu Nowicjusz (150 p.)
zmienione kategorie 3 maja 2019 przez ScriptyChris

Na zaliczenie z projektowania mam zrobić prostą gierkę typu Visual Novel używając HTML, CSS i JavaScript.

Zasadniczo użyłam czegoś takiego:

<head>

    <script>

            function dalej(){
              document.getElementById('tekst').innerHTML="Tekst drugi";
            }

    </script>

</head>

<body>

        <div class="rama">
            <p id="tekst">Tekst pierwszy</p>

            <img src="dalej.png" onclick="dalej()">
        </div>

Problem w tym, że chciałabym aby po kliknięciu w ikonkę "dalej" pojawiał się kolejny, kolejny i kolejny tekst a potem przekierowanie do kolejnej strony. Pomyślałam, żeby zrobić to w ten sposób, żeby po kliknięciu w przycisk z funkcją 1 podmieniała ona funkcję przycisku żeby w kolejnym kliknięciu ten sam przycisk aktywował już funkcję 2 itd.

To dopiero początki w programowaniu więc byłabym wdzięczna, za wytłumaczenie jak debilowi :D

1 odpowiedź

odpowiedź 3 maja 2019 przez wiktoz Mądrala (7,040 p.)
wybrane 4 maja 2019 przez Koniuu

Najlepsza

Trzeba by było podmienić również przycisk, aby teraz pokazywał kolejny tekst a nie cały czas ten sam.

Proponuję zrobić coś takiego, aby w argumencie funkcji dalej podać numer tekstu, tj.

function dalej(nr){
     if(nr==1){
         document.getElementById("tekst").innerHTML = "jakis tam tekst 1";
     }
     if(nr==2){
         document.getElementById("tekst").innerHTML = "jakis tam tekst 2";
     }

     // itd.
     // na końcu dodajesz kod, który zmieni przycisk, aby kierował do następnego tekstu
    document.getElementById("przycisk").innerHTML = 
    "<img src="dalej.png" onclick='dalej("nr+1")'>";
}

Jeśli masz jakieś pytania co do kodu to pisz! :)

komentarz 4 maja 2019 przez Mateo13 Bywalec (2,360 p.)

ja bym zrobił tak:

- teksty powsadzał jako kolejne elementy tablicy

- dodał jakas zmienna jako iterator

-na onClick event textContent/innerHTML = tablica[iterator] do momentu az iterator < tablica.length

komentarz 4 maja 2019 przez Koniuu Nowicjusz (150 p.)

@wiktoz, Wygląda fajnie tylko, że nie działa.. Może ja coś gdzieś źle wpisuje. No i jeszcze zostaje kwestia tego, żeby w ostatnim kliknięciu zawierało link do kolejnej strony

Wrzucam cały kod bo może mam błąd jeszcze gdzieś indziej :/

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css" />

    <script>

            function dalej(nr){
                    if(nr==1){
                        document.getElementById("tekst").innerHTML = "jakis tam tekst 1";
                    }
                    if(nr==2){
                        document.getElementById("tekst").innerHTML = "jakis tam tekst 2";
                    }
                document.getElementById("przycisk").innerHTML = "<img src="dalej.png" onclick='dalej("nr+1")'>";
            }

    </script>

</head>

<body background="tlo/tlo_01.jpg">
    <center>
        <div class="rama">
            <p id="tekst">Tekst początkowy</p>

            <img id="przycisk" src="dalej.png" onclick="dalej(nr)" >
        </div>
   
        
        
    </center>


</body>

</html>

komentarz 4 maja 2019 przez Mateo13 Bywalec (2,360 p.)

no dziwne żeby działało jak wywołujesz funkcje onclick z przekazanym argumentem (nr) zamiast literału number czyli np. dalej(1) a nie dalej(nr)

nawet z tego co widze nie masz zmiennej przechowywującej nr

let nr = 0;

a w funkcji nr++;

komentarz 4 maja 2019 przez Koniuu Nowicjusz (150 p.)

A gdzie to wpisać bo w takim razie w tym jest problem. Próbowałam wpisać dalej(1) i też nie działało bo nie było let

komentarz 4 maja 2019 przez wiktoz Mądrala (7,040 p.)

function dalej(nr){
                    if(nr==1){
                        document.getElementById("tekst").innerHTML = "jakis tam tekst 1";
                    }
                    if(nr==2){
                        document.getElementById("tekst").innerHTML = "jakis tam tekst 2";
                    }
                    nr++;
                document.getElementById("przycisk").innerHTML = "<img onclick='dalej("+nr+")'>";
            }

<p id="tekst"></p>
<p id="przycisk"><img onclick='dalej(1)'></p>

id nadajesz dla jakiegoś selektora, w którym będzie twój img, ponieważ później w kodzie js zastępujesz zawartość selektora z tym id

komentarz 4 maja 2019 przez Koniuu Nowicjusz (150 p.)

Działa ale po kliknięciu znika przycisk bo jest obrazkiem. Jak wpiszę

document.getElementById("przycisk").innerHTML = "<img src="dalej.png" onclick='dalej("+nr+")>";

To znów przestaje działać i jak klikam to nic się nie dzieje

komentarz 4 maja 2019 przez Koniuu Nowicjusz (150 p.)

Jeśli usunę obrazek i zamienię <p> na <button> wtedy działa ale tylko pierwsze kliknięcie

komentarz 4 maja 2019 przez wiktoz Mądrala (7,040 p.)

Może spróbuj dać buttona zamiast obrazka, a ten obrazek daj na background tego buttona.

"<button style='background-img: url(dalej.png)' onclick='dalej("+nr+")'></button>"

komentarz 4 maja 2019 przez Koniuu Nowicjusz (150 p.)

Teraz wszystko działa :) Wielkie dzięki uratowaliście mi zaliczenie :D

komentarz 4 maja 2019 przez wiktoz Mądrala (7,040 p.)

Bardzo się cieszę, że mogłem pomóc. Fajnie by było jakbyś oznaczyła odpowiedź jako najlepszą po lewej stronie :)

Podobne pytania

–1 głos

1 odpowiedź 632 wizyt

JavaScript - zmiana tła na stronie po kliknięciu w dany element z klasy

pytanie zadane 11 grudnia 2018 w C i C++ przez Sardes Nowicjusz (120 p.)

0 głosów

2 odpowiedzi 1,199 wizyt

Podmiana wartości input a, na wartość input b po kliknięciu przycisku. problem z atrybutem name.

pytanie zadane 12 lipca 2017 w JavaScript przez Wojtek Janiak Nowicjusz (170 p.)

0 głosów

1 odpowiedź 1,517 wizyt

Podmiana zdjęć po kliknięciu

pytanie zadane 23 maja 2017 w HTML i CSS przez ayo1001 Obywatel (1,890 p.)

Jak napisać funkcję, aby tekst po kliknięciu zmieniał się na kolejny? [JavaScript]

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci