Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [JavaScript]Nie działa skrypt JS

Napisany przez: 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 
 
<!doctype html>
 
<http://december.com/html/4/element/html.html lang="pl">
<http://december.com/html/4/element/head.html>
  <http://december.com/html/4/element/meta.html charset="utf-8">
 
  <http://december.com/html/4/element/title.html>Pierwszy test</http://december.com/html/4/element/title.html>
  <http://december.com/html/4/element/meta.html name="description" content="The HTML5 Herald">
  <http://december.com/html/4/element/meta.html name="author" content="SitePoint">
 
  <http://december.com/html/4/element/link.html rel="stylesheet" href="css/styles.css?v=1.0">
 
 
</http://december.com/html/4/element/head.html>
 
<http://december.com/html/4/element/body.html>
    <http://december.com/html/4/element/p.html class="demo">To jest pierwszy przykładowy tekst do js</http://december.com/html/4/element/p.html>
    <http://december.com/html/4/element/p.html class="demo">To jest drugi przykładowy tekst do js</http://december.com/html/4/element/p.html>
    <http://december.com/html/4/element/p.html class="demo">To jest trzeci przykładowy tekst do js</http://december.com/html/4/element/p.html>
    <http://december.com/html/4/element/div.html id="test"></http://december.com/html/4/element/div.html>
  <http://december.com/html/4/element/script.html>
 
    var x = document.getElementsByClassName("demo");
    var liczba = x.length;
    var i;
      change();
    function change() {
        for (i=0; i < liczba; i++) {
            var stan = x[i].innerHTML;
            document.getElementById('test').innerHTML = stan;
 
        }
        setTimeout(change, 2000);
    }
 
  </http://december.com/html/4/element/script.html>
</http://december.com/html/4/element/body.html>
</http://december.com/html/4/element/html.html>
 
[HTML] pobierz, plaintext

Napisany przez: 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.

Napisany przez: olszam 25.06.2018, 12:56:35

[PHP] pobierz, plaintext 
function change() {
      var i=0;
          setInterval(function(){
            if(i<liczba){
              var stan = x[i].innerHTML;
              document.getElementById('test').innerHTML = stan;
              i=i+1;
            }else{
              i = 0;
              var stan = x[i].innerHTML;
              document.getElementById('test').innerHTML = stan;
              i=i+1;
            }
          }, 2000);
 
    }
[PHP] pobierz, plaintext

tą funkcję mógłbyś tak zmienić jeśli ci zależy na ciągłym wracaniu do początku

Napisany przez: trueblue 25.06.2018, 13:13:17

To już prościej tak:

[HTML] pobierz, plaintext 
function change() {
      var i=0;
          setInterval(function(){
            if(i<liczba){
              var stan = x[i].innerHTML;
            }else{
              var stan = x[0].innerHTML;
              i=1;
            }
            i++;
            document.getElementById('test').innerHTML = stan;
          }, 2000);
}
[HTML] pobierz, plaintext

albo wręcz tak:

[HTML] pobierz, plaintext 
function change() {
      var i=0;
          setInterval(function(){
            i %= liczba;
            var stan = x[i++].innerHTML;
            document.getElementById('test').innerHTML = stan;
          }, 2000);
}
[HTML] pobierz, plaintext