Aktualizacja zawartości DIV'a w czasie

0

Witam.

Mam taki mały problem z JS i html'em a mianowicie chciałem zrobić wyświetlanie w czasie informacji poprzez zmianę zawartości pewnych divów na stronie. Problem polega na tym że zmienia się zawartość tylko jednego z divów zamiast 2 i to nie zmienia się regularnie. Może ktoś mi wytłumaczyć czemu się tak dzieje ewentualnie zaproponować inne rozwiązanie?

kod :

 window.onload = function()
{
 setTimeout("change('divid1', '1')", 1000);
 setTimeout("change('divid2', '1')", 1000);

 setTimeout("change('divid1', '2')", 1500);
 setTimeout("change('divid2', '2')", 1500); 

 setTimeout("change('divid1', '3')", 2000);
 setTimeout("change('divid2', '3')", 2000); 
 
 setTimeout("change('divid1', '4')", 2500);
 setTimeout("change('divid2', '4')", 2500); 
 
 setTimeout("change('divid1', '5')", 3000);
 setTimeout("change('divid2', '5')", 3000); 
 
 setTimeout("change('divid1', '6')", 3500);
 setTimeout("change('divid2', '6')", 3500); 
 
 setTimeout("change('divid1', '7')", 4000);
 setTimeout("change('divid2', '7')", 4000); 
 
 setTimeout("change('divid1', '8')", 4500);
 setTimeout("change('divid2', '8')", 4500); 
 
 setTimeout("change('divid1', '9')", 5000);
 setTimeout("change('divid2', '9')", 5000); 
 
 
}
function change(where, what)
{
 document.getElementById(where).innerHTML=what;
}

Czy może to być związane z jakimiś zabezpieczeniami, że się nie chce zmieniać? Już wyczerpałem pomysły czemu nie można zmienić więcej niż jednego elementu na stronie :(

1

http://jsbin.com/idowaz/1/
Nic takiego się nie dzieje, wszystko działa. Oprócz tego, że nie miałeś średników na końcu pierwszego parametru setTimeout().

A teraz ważne:
NIE!!!!!!! NIE! NIE PODAWAJ STRINGA jako pierwszy parametr setTimeout/setInterval.
Używaj funkcji anonimowej jeżeli potrzebujesz uruchomić funkcję z parametrami, jeżeli nie - po prostu nazwa funkcji, czyli np:

setTimeout(function() { change('divid1', '1'); }, 1000);

Zalety: Większe bezpieczeństwo, szybkość wykonywania zapewne też, logiczniej to wygląda, IDE ani Ci takiego stringa nie pokoloruje, ani nie sprawdzi w nim błędów składni.
Wady: Brak.

Jeżeli nie potrzebujesz przekazywać parametrów do funkcji wywoływanej w setTimeout no to można prościej:

setTimeout(hello, 1000);
function hello() {
  alert('hello');
}
0

Wielkie dzięki :)

A tak aby nie rozpoczynać nowego tematu możesz mi powiedzieć jak zmienić tą funkcję aby w IE nie wywalała błędów w JS? :

function showlayer(css)
{
 // Do ukrycia wybierz id Error4044
 id = document.getElementById(css);
 // ustaw aby nie był wyświetlany
 document.getElementById(css).style.display = "inline";
}

Dodatkowo chcę ją zmienić aby była uniwersalna - czyli jeżeli będę chciał zmienić inne polecenie (np width czy height) to chciałbym aby można było w tej funkcji tego dokonać - niestety coś nie działa mi moja wersja :

function showlayer(css, zmienna, wartosc)
{
// Do ukrycia wybierz id Error4044
id = document.getElementById(css);
// ustaw aby nie był wyświetlany
document.getElementById(css).style.zmienna = wartosc;
}

Ale znowu też nie wiem jak tego dokonać normalnie :/

1

Ta funkcja wywala Ci błąd chyba tylko jak nie znajdzie elementu?
I po co Ci ta zmienna id skoro z niej nie korzystasz? I jej nazwa jest myląca. I robisz z niej zmienną globalną - lektura o słowie kluczowym var zalecana.

http://jsbin.com/epurav/2/

Po napisaniu Ci tego przykładu i przeanalizowaniu jeszcze raz całości w ogóle chciałbym Ci polecić przeczytanie czegokolwiek o składni i logice javascriptu, a następnie pisanie czegokolwiek w tym, bo w ten sposób zalejesz forum pytaniami o raczej podstawowe rzeczy ;)

0

No z tym poleceniem o JS to prawda ale id wykorzystuję w dalszej części skryptu - to jest tylko część funkcji wycięta aby było mniej więcej widać o co chodzi :)

Ogólnie to potrzebuję się dostać bezpośrednio do parametrów css i dodatkowo zamienić plik css na inny (aby strona się od razu zmieniła na inną)

I tak jeszcze raz dzięki :)

Takie pytanie... czemu to nie działa :

 for(var klatka=1; klatka<26; klatka++)
    {
     var dlugosc = (20*klatka) + 'px';
     setTimeout(
                function()
                {
                 setProperty(
                             'bar2', 
                             'width', 
                             dlugosc
                            ); 
                },
                (klatka*25)
               );
    }

function setProperty(id, prop, val)
{
  var obj = document.getElementById(id);
  if(obj)
   {
    obj.style[prop] = val;
    return true;
   }
 return false;
}

Przecież teoretycznie wszystko się zgadza :/

1 użytkowników online, w tym zalogowanych: 0, gości: 1