Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dziwna sprawa z innerHTML
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
cve
21.12.2009, 16:44:20
Witam posiadam następujące pliki:

index.hml

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="pl">
  5.  
  6. <head>
  7. 	<title>An XHTML 1.0 Strict standard template</title>
  8. 	<meta http-equiv="content-type" 
  9. 		content="text/html;charset=utf-8" />
  10. 	<meta http-equiv="Content-Style-Type" content="text/css" />
  11. 	<script type="text/javascript" src="prepJSfuncs.js"></script>
  12. 	<script type="text/javascript" src="javascript.js"></script>
  13. 	<link href="style.css" rel="stylesheet" media="all" />
  14. </head>
  15.  
  16. <body>
  17.  
  18.     <div class="item">1</div>
  19. 	<div class="item">2</div>
  20. 	<div class="item">3</div>
  21. 	<div class="item">4</div>
  22. 	<div class="item">5</div>
  23. 	<div class="item">6</div>
  24.  
  25. </body>
  26. </html>
[HTML] pobierz, plaintext


prepJSfuncs.js:

[PHP] pobierz, plaintext 
  1. function addEvent(odnosnik, zdarzenie, funkcja)
  2. {
  3. 	if (odnosnik.addEventListener)
  4. 	{
  5. 	odnosnik.addEventListener(zdarzenie, funkcja, false);
  6. 	}
  7. 	else
  8. 	{
  9. 	odnosnik.attachEvent("on"+zdarzenie, funkcja);
  10. 	}
  11. }
  12. function getElById( id ) 
  13. {
  14. 	return document.getElementById( id );
  15. }
  16.  
  17. function getElByClassName (cl) {
  18. 	var retnode = [];
  19. 	var myclass = new RegExp('\\b'+cl+'\\b');
  20. 	var elem = document.getElementsByTagName('*');
  21. 	for (var i = 0; i < elem.length; i++) {
  22. 		var classes = elem[i].className;
  23. 		if (myclass.test(classes)) retnode.push(elem[i]);
  24. 	}
  25. 	return retnode;
  26. }
[PHP] pobierz, plaintext


javascript.js
[PHP] pobierz, plaintext 
  1. addEvent(window, 'load', start);
  2. function start() {
  3.  
  4. 	divItems = getElByClassName('item');
  5. 	divsText = new Array();
  6. 	for(i in divItems) {
  7. 		divsText[i] = divItems[i].innerHTML;
  8. 	}
  9. 	for(i in divItems) {
  10. 		addEvent(divItems[i], 'mouseover', function () { this.innerHTML = 'Najechano' });
  11. 		addEvent(divItems[i], 'mouseout', function () { this.innerHTML = divsText[i]; });
  12. 	}
  13. }
[PHP] pobierz, plaintext


a problem polega na tym, ze gdy najadę na jakikolwiek div to wszystko jest ok, pokazuje się w jego zawartosci 'Najechano', ale gdy zjadę kursorem z któregokolwiek diva to przypisuje mu zawartosc '6'? jak to sie dzieje? nie mam pojęcia...? przed wywolaniem addEvent w petli alert(divsText[i]); w petli pokazuje ladnie kolejne 1, 2, 3, 4, 5, 6, wiec nie mam zielonego pojecia dlaczego nie chce wybrac z tablicy odpowiedniego elementu tylko caly czas ostatni... ktorego wartoscia jest '6';
ziqzaq
22.12.2009, 09:03:11
Witam.
Zmienna "i" nie jest przekazywana do anonimowej funkcji wykonywanej podczas zdarzeń "onmouseover|out". W tej funkcji odwołujesz się do zmiennej "i", która występuje w "for".
Zrób sobie prosty test i spróbuj się domyślić co teraz będzie wstawiane w div-y:
[JAVASCRIPT] pobierz, plaintext 
  1. for (i in divItems) {
  2. // kod
  3. }
  4. i = 0;
[JAVASCRIPT] pobierz, plaintext

Jeśli chodzi o przekazywanie parametrów to spróbuj partial.
Przykład użycia:
[JAVASCRIPT] pobierz, plaintext 
  1. addEvent(el, 'onmouseover', partial(przykladowaFunkcja, el, 'przykladowy tekst mouseover'));
  2. function przykladowaFunkcja(el, txt) {
  3. 	el.innerHTML = txt;
  4. }
[JAVASCRIPT] pobierz, plaintext

Pozdrawiam
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.