po kliknięciu guzika pokarze się następny tekst

pytanie zadane 31 stycznia 2022 w JavaScript przez XDBX Użytkownik (640 p.)

to mój początkowy kod

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>tekst</title>
        <script>
    
        </script>
    </head>
    <body>
        <h2>Zmień tekst</h2>
        <script>
            function zmien_tekst()
            {
            document.getElementById("blok").innerHTML='mimozami jesień się zaczyna'
            }
        </script>
        <p>Pory roku <b id="blok">Lato, lato; lato czeka...</b></p>
        <input type="button" onclick="zmien_tekst()" value="Zmień tekst">
    </body>
</html>

teraz pytanie co mam zrobić żeby po kliknięciu pojawiły się następne teksty i żeby na ostatnim z nich po kliknięciu pojawił się początkowy

komentarz 31 stycznia 2022 przez VBService Ekspert (253,340 p.)
edycja 31 stycznia 2022 przez VBService

BTW. Nie powinno się "używać" tag-u  w taki sposób

<p>Pory roku <b id="blok">Lato, lato; lato czeka...</b></p>

: The Bring Attention To element

The  HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use for styling text; instead, you should use the CSS font-weight property to create boldface text, or the element to indicate that text is of special importance.

raczej spróbuj zapisać to tak:

<p>Pory roku <span id="blok"><b>Lato, lato; lato czeka...</b></span></p>

lub

<p>Pory roku <span id="blok" style="font-weight: bold;">Lato, lato; lato czeka...</span></p>

lub

<p>Pory roku <span id="blok">Lato, lato; lato czeka...</span></p>

p span#blok {
  font-weight: bold;
}

lub

<p id="blok">Pory roku <span>Lato, lato; lato czeka...</span></p>

p#blok span {
  font-weight: bold;
}

lub

#blok span {
  font-weight: bold;
}

const blok = document.querySelector('#blok span');
blok.textContent = tekst;

2 odpowiedzi

odpowiedź 31 stycznia 2022 przez Marak123 Stary wyjadacz (11,190 p.)

Jednym ze sposobów jest tablica z tekstami która mają być wstawiane i zwiększanie indeksu wstawiania gdy zostanie kliknięty przycisk.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>tekst</title>
    </head>
    <body>
        <h2>Zmień tekst</h2>
        <p>Pory roku <b id="blok">Tekst 1</b></p>
        <input type="button" onclick="zmien_tekst()" value="Zmień tekst">
    </body>
  <script>
      const tekst = [
      "Tekst 1",
      "Tekst 2",
      "Tekst 3",
      "Tekst 4",
      "Tekst 5"
    ]
    var indText = 0

    function zmien_tekst()
    {
      if(indText != tekst.length-1) 
        indText++;
      else 
        indText = 0;
      document.getElementById("blok").innerHTML = tekst[indText]
    }
  </script>
</html>

odpowiedź 31 stycznia 2022 przez XDBX Użytkownik (640 p.)

dzięki za odpowiedzi

udało mi się zrobic to za pomocą switha

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>zmień tekst</title>
        <script>
    
        </script>
    </head>
    <body>
        <h2>Zmień tekst</h2>
        <script>
            var liczba=1
            function zmien_tekst()
            {
                liczba +=1;
                switch(liczba){
                    case 1:document.getElementById("blok").innerHTML='lato, lato: lato czeka';
                    break;
                    case 2:document.getElementById("blok").innerHTML='mimozami jesień się zaczyna';
                    break;
                    case 3:document.getElementById("blok").innerHTML='hu hu ha masza zima zła';
                    break;
                    case 4:document.getElementById("blok").innerHTML='wisna siosna wonna i radosna';
                        liczba =0;
                    break;
                }
            
            }
        </script>
        <p>Pory roku: <b id="blok">Lato, lato; lato czeka...</b></p>
        <input type="button" onclick="zmien_tekst()" value="Zmień tekst">
    </body>
</html>

komentarz 31 stycznia 2022 przez VBService Ekspert (253,340 p.)
edycja 31 stycznia 2022 przez VBService

<script>
  var liczba=1, tekst;
  function zmien_tekst()
  {
    liczba++;
    switch(liczba)
    {
      case 1: tekst='lato, lato: lato czeka'; break;
      case 2: tekst='mimozami jesień się zaczyna'; break;
      case 3: tekst='hu hu ha masza zima zła'; break;
      case 4: tekst='wiosna, wiosna wonna i radosna'; liczba=0; break;
    }
    document.getElementById("blok").textContent = tekst;             
  }
</script>

jednak polecam rozwiązanie podane przez @Marak123,

<script>
  const tekst = [
    'lato, lato: lato czeka',
    'mimozami jesień się zaczyna',
    'hu hu ha masza zima zła',
    'wiosna, wiosna wonna i radosna'
  ];
  let tekst_indeks = 0;

  function zmien_tekst()
  {
    (tekst_indeks < tekst.length - 1) ? tekst_indeks++ : tekst_indeks = 0;
    document.getElementById("blok").textContent = tekst[tekst_indeks];
  }
</script>