Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z document.getElementById w pętli for
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Jarod
16.12.2008, 21:59:37
Mam takie pola formualrza:
[HTML] pobierz, plaintext 
  1. <input type="text" name="nazwa1" id="nazwa1" />
  2. <input type="text" name="nazwa2" id="nazwa2" />
  3. <input type="text" name="nazwa3" id="nazwa3" />
  4. <input type="text" name="nazwa4" id="nazwa4" />
[HTML] pobierz, plaintext

Wpisuję do nich kolejno cyfry: 1,2,3,4 i wysyłam formularz. Mam zdarzenie onSubmit, które wywołuje funkcję JS.

Kod
function formValidator()
{
    var aId = new Array("nazwa1", "nazwa2", "nazwa3", "nazwa4");
    
    // Ten fragment zadziała prawidłowo i wyświetli cyfry: 1,2,3,4
    a = document.getElementById('nazwa1');
    b = document.getElementById('nazwa2');
    c = document.getElementById('nazwa3');
    d = document.getElementById('nazwa4');
    document.write(a.value + " " + b.value + " " + c.value + " " + d.value);

    //Ten fragment wyświetla tylko cyfrę 1 i się zatrzymuje (tak jakby zawieszał)
    for (var klucz in aId )
    {
        var temp = document.getElementById(aId[klucz]);
        document.write(temp.value + "<br>");
    }
    
    return false;
}


Nie jestem pewny dlaczego pętla nie działa prawidłowo ale chyba problem leży w tym, że najpierw pobieram zawartość i zaraz wpisuję w dokument.
Jeśli najpierw pobiorę zawartość każdego inputa a następnie wrzucę w tablicę i osobną pętlą ją wylistuję to jest ok.
Ale to moje przypuszczenia więc proszę wyjaśnienie tego przypadku.

pzdr.
ziqzaq
16.12.2008, 22:15:24
Błąd jest chyba związany z instrukcją document.write(), z alert() działa jak ta lala.
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Quiz</title>
  4. <link rel="stylesheet" href="style.css" type="text/css"/>
  5. <script type="text/javascript">
  6. function formValidator()
  7. {
  8.     var aId = new Array("n1", "n2", "n3", "n4");
  9.  
  10.     // Ten fragment zadziała prawidłowo i wyświetli cyfry: 1,2,3,4
  11.     a = document.getElementById('n1');
  12.     b = document.getElementById('n2');
  13.     c = document.getElementById('n3');
  14.     d = document.getElementById('n4');
  15.     //document.write(a.value + " " + b.value + " " + c.value + " " + d.value);
  16.  
  17.     //Ten fragment wyświetla tylko cyfrę 1 i się zatrzymuje (tak jakby zawieszał)
  18.     for (var klucz in aId)
  19.     {
  20.         var temp = document.getElementById(aId[klucz]);
  21.         alert(klucz+"  "+temp.value);
  22.         //document.writeln(temp.value + "<br>");
  23.     }
  24.  
  25.     return false;
  26. }
  27. </script>
  28. </head>
  29. <body>
  30. <form>
  31. <input type="text" name="n1" id="n1" value="val1" />
  32. <input type="text" name="n2" id="n2" value="val2" />
  33. <input type="text" name="n3" id="n3" value="val3" />
  34. <input type="text" name="n4" id="n4" value="val4" />
  35. <input type="submit" value="Klik!" onclick="return formValidator();"
  36. </form>
  37. </body>
  38. </html>
[HTML] pobierz, plaintext


Edit:
Na szybkiego z tej stronki "The document.write command must be carried out during the loading of the page."
Jarod
16.12.2008, 22:23:15
Cytat(ziqzaq @ 16.12.2008, 22:15:24 ) *
Błąd jest chyba związany z instrukcją document.write(), z alert() działa jak ta lala.

Nie jestem pewny dlaczego pętla nie działa prawidłowo ale chyba problem leży w tym, że najpierw pobieram zawartość i zaraz wpisuję w dokument.
Jeśli najpierw pobiorę zawartość każdego inputa a następnie wrzucę w tablicę i osobną pętlą ją wylistuję to jest ok.
ziqzaq
16.12.2008, 22:26:06
A więc jeszcze raz z tej samej stronki.
"The document.write command must be carried out during the loading of the page. So, if it is attached to any event that executes after the page has loaded, then the whole page will be replaced with the contents of the document.write command."
Chyba przez to. Pętla działa prawidłowo IMHO. winksmiley.jpg
Jarod
16.12.2008, 22:29:09
Cytat(ziqzaq @ 16.12.2008, 22:26:06 ) *
A więc jeszcze raz z tej samej stronki.
"The document.write command must be carried out during the loading of the page. So, if it is attached to any event that executes after the page has loaded, then the whole page will be replaced with the contents of the document.write command."
Chyba przez to. Pętla działa prawidłowo IMHO. winksmiley.jpg


Nie zauważyłem, że edytowałeś. A jest inny sposób wypisania na stronie bez skutków ubocznych?winksmiley.jpg

pzdr.
ziqzaq
16.12.2008, 22:35:35
Z tego co wiem - a wiem niewiele winksmiley.jpg - to:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. // Masz np. jakiegoś diva z id=moj_divek
  3. d = document.getElementById('moj_divek');
  4.  
  5. // Dodajemy zawatosc do diva
  6. // Z czego trzeba zauwazyc ze innerHTML odpada na stronkach xml/xhtml
  7. d.innerHTML('Tutaj idzie zawartosc diva');
  8. </script>
[HTML] pobierz, plaintext


Ewentualnie jeśli interesują cie większe możliwości parsowania html i edycji to polecam jakiś framework do tego np. jQuery

Edit: literówka
Jarod
16.12.2008, 22:40:11
Cytat(ziqzaq @ 16.12.2008, 22:35:35 ) *
Z tego co wiem - a wiem niewiele winksmiley.jpg - to:
[HTML] pobierz, plaintext 
  1. // Z czego trzeba zauwazyc ze innerHTML odpada na stronkach xml/xhtml
[HTML] pobierz, plaintext


Ewentualnie jeśli interesują cie większe możliwości parsowania html i edycji to polecam jakiś framework do tego np. jQuery


Interesuje mnie rozwiązanie działające na stronach xhtml.
Nie chcę frameworka bo nie ma sensu a armatą na muchy.
ziqzaq
16.12.2008, 22:44:57
Jeśli serwujesz stronę xhtml jako text/html (zupa tagów) to nie ma przeszkody.
Problem wystąpi jeśli będziesz ją serwował jako application/xml lub application/xhtml+xml. Jeśli się dobrze orientuję to nie można zmieniać sparsowanego dokumentu xml bo mogłaby wystąpić sytuacja gdy dokument nie waliduje się (np. jakiś niezamknięty znacznik). Dlatego metoda "innerHTML" została wyłączona w dokumentach serwowanych z takimi nagłówkami.
Innych metod nie znam, ale jeśli są to chętnie poznam winksmiley.jpg

Edit:
Hmm wcześniej się tym nie interesowałem, ale widzę, że są alternatywy np.
innerHTML: the ultimate alternative solution, innerHTML alternatives.
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.