Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript] Prosty Problem DOM
Forum PHP.pl > Forum > Przedszkole
frytek92
30.05.2010, 12:16:46
Witam ostatnio postanowiłem douczyć sie javascript-u w czystej postaci, mam taki kod niby wszystko działa ale w momencie kiedy klikam "Usuń Element" zostaje wyświetlone "Element został usunięty" i nic sie z elementami nie dzieje w przypadku kiedy drugi raz nacisnę dopiero element zostaje usunięty, kiedy umieszczę w funkcji list.removeChild(list.lastChild); 2 razy dopiero wtedy widać że element został usunięty ale myślę ze da się to jakoś obejść bo to w miarę nie profesjonalne.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  8.  
  9. <title>JavaScript - Przykłady</title>
  10.  
  11. <script type="text/javascript">
  12.  
  13. function removeItem() {
  14.  
  15. 	var list = document.getElementById("list");
  16.  
  17. 	var status = document.getElementById("status_01");
  18.  
  19. 	if(list.childNodes.length > 0){
  20.  
  21. 		list.removeChild(list.lastChild);
  22.  
  23. 		status.innerHTML = "Element został usunięty";
  24.  
  25. 	} else { status.innerHTML = "Brak elementów"; }
  26.  
  27. }
  28.  
  29. </script>
  30.  
  31. </head>
  32.  
  33. <body>
  34.  
  35. <p id="status_01">Brak Akcji</p>
  36.  
  37. <ol id="list">
  38.  
  39. <li>Element Listy</li>
  40.  
  41. <li>Element Listy</li>
  42.  
  43. <li>Element Listy</li>
  44.  
  45. <li>Element Listy</li>
  46.  
  47. <li>Element Listy</li>
  48.  
  49. </ol>
  50.  
  51. <input type="button" onclick="removeItem();" value="Usuń" />
  52.  
  53. </body>
  54.  
  55. </html>
[HTML] pobierz, plaintext
kamil4u
30.05.2010, 13:18:42
Twój kod nie działa z powodu...:
http://kurs.browsehappy.pl/Definicja/DOM
http://kurs.browsehappy.pl/JavaScript/DOM (<--tu rozwiązanie)

W razie czego daj alert-a na list.lastChild i zobacz, że nie masz tam tylko elementów smile.gif

Tu działający kod( mogłem trochę namieszać(szczególnie z pętlą for, ale myślę, że powinieneś sobie poradzić)).
Kod
<script type="text/javascript">


function removeItem() {
    var list = document.getElementById("list");
    var status = document.getElementById("status_01");
    
        for(var i=list.childNodes.length; el=list.childNodes[--i];){
         if(el.nodeType == 1) break;
         else if(i==0) status.innerHTML = "Brak elementów";
        }

        list.removeChild(el);
        status.innerHTML = "Element został usunięty";

}
</script>

</head>

<body>

<p id="status_01">Brak Akcji</p>

<ol id="list">

<li>Element Listy</li>

<li>Element Listy</li>

<li>Element Listy</li>

<li>Element Listy</li>
<li>Element Listy</li>
</ol>

<input type="button" onclick="removeItem();" value="Usuń" />

</body>

</html>
zegarek84
30.05.2010, 14:25:02
lub zamiast poprawiać kod JS wystarczy poprawić kod HTML:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>JavaScript - Przykłady</title>
  6. <script type="text/javascript">
  7. function removeItem() {
  8. 	var list = document.getElementById("list");
  9. 	var status = document.getElementById("status_01");
  10. 	if(list.childNodes.length > 0){
  11. 		list.removeChild(list.lastChild);
  12. 		status.innerHTML = "Element został usunięty";
  13. 	} else { status.innerHTML = "Brak elementów"; }
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <p id="status_01">Brak Akcji</p>
  19. <ol id="list"><li>Element Listy</li><li>Element Listy</li><li>Element Listy</li><li>Element Listy</li><li>Element Listy</li></ol>
  20. <input type="button" onclick="removeItem();" value="Usuń" />
  21. </body>
  22. </html>
[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.