Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Nie działa skrypt JS
Forum PHP.pl > Forum > Przedszkole
michuwsh
21.06.2018, 22:35:27
Hej mam problem potrzebuje pobrać akapity o klasie "demo" do tablicy/obiektu policzyć ile występuje takich akapitów o klasie demo i wyświetlić każdy z osobna z 2 sekundowym timeoutem w pojemniku div o nazwie test. Ma to być coś na zasadzie slidera ale zamiast zdjęć ma zmieniać się tekst. Moj kod wygląda tak : 
[HTML] pobierz, plaintext 
  1.  
  2. <!doctype html>
  3.  
  4. <html lang="pl">
  5. <head>
  6.   <meta charset="utf-8">
  7.  
  8.   <title>Pierwszy test</title>
  9.   <meta name="description" content="The HTML5 Herald">
  10.   <meta name="author" content="SitePoint">
  11.  
  12.   <link rel="stylesheet" href="css/styles.css?v=1.0">
  13.  
  14.  
  15. </head>
  16.  
  17. <body>
  18.     <p class="demo">To jest pierwszy przykładowy tekst do js</p>
  19.     <p class="demo">To jest drugi przykładowy tekst do js</p>
  20.     <p class="demo">To jest trzeci przykładowy tekst do js</p>
  21.     <div id="test"></div>
  22.   <script>
  23.  
  24.     var x = document.getElementsByClassName("demo");
  25.     var liczba = x.length;
  26.     var i;
  27.       change();
  28.     function change() {
  29.         for (i=0; i < liczba; i++) {
  30.             var stan = x[i].innerHTML;
  31.             document.getElementById('test').innerHTML = stan;
  32.  
  33.         }
  34.         setTimeout(change, 2000);
  35.     }
  36.  
  37.   </script>
  38. </body>
  39. </html>
  40.  
[HTML] pobierz, plaintext
markuz
22.06.2018, 12:09:34
Teraz co 2 sekundy podmieniasz treść diva o id test 3 razy - więc finalnie będziesz widział tylko treść ostatniego diva za każdym razem. Zmienną i musisz trzymać poza pętlą (tak jak jest obecnie) i zwiększać ją tylko raz (lub zmniejszać do 0) w funkcji change.
olszam
25.06.2018, 12:56:35 
[PHP] pobierz, plaintext 
  1. function change() {
  2.       var i=0;
  3.           setInterval(function(){
  4.             if(i<liczba){
  5.               var stan = x[i].innerHTML;
  6.               document.getElementById('test').innerHTML = stan;
  7.               i=i+1;
  8.             }else{
  9.               i = 0;
  10.               var stan = x[i].innerHTML;
  11.               document.getElementById('test').innerHTML = stan;
  12.               i=i+1;
  13.             }
  14.           }, 2000);
  15.  
  16.     }
[PHP] pobierz, plaintext

tą funkcję mógłbyś tak zmienić jeśli ci zależy na ciągłym wracaniu do początku
trueblue
25.06.2018, 13:13:17
To już prościej tak:
[HTML] pobierz, plaintext 
  1. function change() {
  2.       var i=0;
  3.           setInterval(function(){
  4.             if(i<liczba){
  5.               var stan = x[i].innerHTML;
  6.             }else{
  7.               var stan = x[0].innerHTML;
  8.               i=1;
  9.             }
  10.             i++;
  11.             document.getElementById('test').innerHTML = stan;
  12.           }, 2000);
  13. }
[HTML] pobierz, plaintext

albo wręcz tak:
[HTML] pobierz, plaintext 
  1. function change() {
  2.       var i=0;
  3.           setInterval(function(){
  4.             i %= liczba;
  5.             var stan = x[i++].innerHTML;
  6.             document.getElementById('test').innerHTML = stan;
  7.           }, 2000);
  8. }
[HTML] pobierz, plaintext
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.