| Autor | Zpráva | ||
|---|---|---|---|
| DarkMeni Profil |
#1 · Zasláno: 18. 7. 2011, 21:52:37
Zdravím, jaký by měl být rozdíl mezi tímto
document.getEelementsByTagName('body')[0].innerHTML = '<element id="id" onclick="alert(\'funguju\');">Text</element>'; document.getEelementsByTagName('body')[0].innerHTML = '<element id="id" onclick="alert(\'funguju\');">Text</element>';
a tímto document.getEelementsByTagName('body')[0].innerHTML = '<element id="id">Text</element>'; document.getEelementsByTagName('body')[0].innerHTML = '<element id="id">Text</element>';
document.getElementById('id').onclick = function(){alert('funguju');};
? Myslel sem si, že mezitím žádný rozdíl není, ale asi je, protože první způsob funguje ale ten druhý jen vyvtoří element (cokoli, třeba "span") s id "id" a vypíše Text ale po kliknutí se nic nestane; A jak se dá k elementu zapsat nějaká proměnná, nebo spíš informace, kterou chci jen u toho elementu? Zkoušel jsem to přes nevalidní atributy které prohlížeči nic neřeknou, ale to mi nějak nefungovalo, když sem si pak nechal alertem vypsat normální atribut, třeba id, tak se vypsal, ale ten nevalidní, třeba "order" se nevypsal. Nebo, existuje jednoduchý způsob, jak zjistit, kolikátý je ten class, jestli je nultý, první, nebo desátý? (To by sem pak nemusel přídávat nevalidní atributy) |
||
| Leo Profil |
#2 · Zasláno: 18. 7. 2011, 22:02:36
DarkMeni:
„A jak se dá k elementu zapsat nějaká proměnná, nebo spíš informace, kterou chci jen u toho elementu? Zkoušel jsem to přes nevalidní atributy které prohlížeči nic neřeknou, ale to mi nějak nefungovalo, když sem si pak nechal alertem vypsat normální atribut, třeba id, tak se vypsal, ale ten nevalidní, třeba "order" se nevypsal.“ To by fungovat mělo, pokud ovšem element v dané chvíli existuje a je javascriptu známý (nemá hodnotu null). „Myslel sem si, že mezitím žádný rozdíl není, ale asi je, protože první způsob funguje ale ten druhý jen vyvtoří element (cokoli, třeba "span") s id "id" a vypíše Text ale po kliknutí se nic nestane“ Ono innerHTML je lehce nestandardni, ale v tomto případě tipuju že jde o to, že prohlížeč nejdřív zpracuje celý blok <script></script>, pak zpracuje výsledné html (tj. dosadí element s id="id"). Takže v js ještě o něm není slechu dechu (document.getElementById('id') má hodnotu null, ale jsem líný to vyzkoušet). |
||
| DarkMeni Profil |
#3 · Zasláno: 18. 7. 2011, 22:25:37
Leo:
„document.getElementById('id') má hodnotu null“ To by mi pak mělo napsat chybu do konzole že? Ale žádnou chybu mi to nenapíše. |
||
| joe Profil |
#4 · Zasláno: 18. 7. 2011, 22:35:47
|
||
| Chamurappi Profil |
#5 · Zasláno: 18. 7. 2011, 22:45:57
Reaguji na DarkMeniho:
Stejně jako moji předřečníci jsem tvůj skript nezkoušel, ale pro změnu si troufnu tvrdit, že funguje. Řetězec, který přiřadíš do innerHTML se rozebere hned, okamžitě se sestaví struktura DOMu a hned na dalším řádku bude fungovat document.getElementById. Pokud nefunguje, prosím o odkaz na živou ukázku.
„jak se dá k elementu zapsat nějaká proměnná, nebo spíš informace, kterou chci jen u toho elementu?“ Přiřazením vlastní vlastnosti k objektu DOMu. Nebo ji chceš také šroubovat od innerHTML? Pokud si vymyslíš vlastní atribut, musíš ho číst přes getAttribute (protože k němu neexistuje žádný standardní význam v DOMu).
|
||
| DarkMeni Profil |
#6 · Zasláno: 19. 7. 2011, 14:49:37
Ten skript jsem napsal z hlavy jen pro přiblížení, mam to použitý někde v 250ti řádkovim skriptu, a je možný že se mi to tam něčim ruší, takže když jsem zakomentoval vložení toho skriptu a zkusil si obě možnosti tak mi to taky fungovalo, máte pravdu.
Takže Vám děkuji za rady, ty "informace" jsem vyřešil getAttributem a zkrátil si to document.bodem, díky. Chamurappi: „Nebo ji chceš také šroubovat od innerHTML?“ A je mezitím nějaký velký rozdíl? |
||
| Chamurappi Profil |
#7 · Zasláno: 19. 7. 2011, 15:28:24
Reaguji na DarkMeniho:
„A je mezitím nějaký velký rozdíl?“ Vypadá to ošklivě a getAttribute bude pomalejší než vlastnost.
K čemu to vlastně potřebuješ? Vymýšlet vlastní atributy má snad smysl jen tehdy, když se snažíš přesunout nějaké konfigurační parametry mimo JS, aby je mohl upravovat někdo jiný přímo v HTML. Nasázet si je tam v JS prakticky, aby si je zase JS luštil, by nikdy nemělo být nutné. |
||
| DarkMeni Profil |
#8 · Zasláno: 19. 7. 2011, 15:55:03
Hodí se mi to k zjištění kolikátý ten element je. Třeba mam 10 obrázků v řadě, se stejnou třídou ale, po kliknutí potřebuju zjistit na kolikátý element se kliklo. Asi se to dá zajistit ukládáním do proměnných v javascriptu, ale nevim jak na to aby to nebylo moc složitý, tak mi toto řešení připadalo jako jednoduché.
|
||
| joe Profil |
#9 · Zasláno: 20. 7. 2011, 00:49:29
DarkMeni:
Nevím na kolik to je správné :-) ale pokud potřebuju něco uložit k elementu, prostě to k němu uložím: var e = document.getElementById('id'); var e = document.getElementById('id');
e.nejakyMujNazez = mojeHodnota;
e.onclick = function() { ... }Není nutné to dávat do atributu do HTML. |
||
| Witiko Profil |
#10 · Zasláno: 20. 7. 2011, 01:54:31 · Upravil/a: Witiko
DarkMeni:
„po kliknutí potřebuju zjistit na kolikátý element se kliklo … aby to nebylo moc složitý“ Editace: Nejčistším řešením bude, jak podotýká Chamurappi, lexikální uzávěr. Ukázkový kód pro vytvoření 10ti obrázků: 1var element; var element;
for(var číslo = 0; číslo++ < 10;) { // Žádná věda, jen cyklus 10ti opakování
element = new Image(" ... ");
element.onclick = (function(číslo) { // Lexikální uzávěr
return function() {
alert("Jsem obrázek #" + číslo);
};
})(číslo);
document.body.appendChild(element); // Vložení elementu do těla dokumentu
}číslo se mění, my ji ale předáme jako argument funkci, kterou ihned spustíme a která nám vytvoří a navrátí naši onclick funkci. Ta pak má dostupnou privátní proměnnou (argument) číslo, která přepisuje proměnnou číslo v cyklu. Tento postup nám umožňuje zachytit hodnotu proměnné v běhu cyklu. Kdybychom nepoužili uzávěr, tak nám všechny obrázky budou hlásit, že jsou číslem 10.
|
||
| joe Profil |
#11 · Zasláno: 20. 7. 2011, 02:28:46
|
||
| Chamurappi Profil |
#12 · Zasláno: 20. 7. 2011, 02:33:24
Reaguji na Witika:
„Stačí si vytvořit pole, do kterého uložíš elementy a po kliknutí zavoláš pole.indexOf(this); a rovnou máš číslo pořadí elementu.“ Pokud je vyrábí postupně a při vytváření elementu zná jeho číslo, tak ho nemusí nikam ukládat, ani zpětně dohledávat, stačí ho nezapomenout (lexikálním uzávěrem, nebo tou vlastní vlastností). |
||
| Witiko Profil |
#13 · Zasláno: 20. 7. 2011, 02:40:20 · Upravil/a: Witiko
joe:
To už je jen optimalizace, nicméně ano, bude to tak čistší a v případě většího počtu elementů i méně paměťově náročné. :-) Chamurappi: „stačí ho nezapomenout (lexikálním uzávěrem, nebo tou vlastní vlastností)“ Však povídám, že na vyhledání v konstatním čase je lepší ho uchovávat v hash tabulce buď jako proměnnou nebo jako vlastnost. :-) Každopádně uznávám, že zasilatele tématu odpovědí s polem spíše matu. Nahradil jsem to ukázkou použití lexikálního uzávěru. Pomohlo by, kdyby nám bylo povězeno, o co se zasilatel tématu snaží. |
||
| Chamurappi Profil |
#14 · Zasláno: 20. 7. 2011, 02:45:14
Reaguji na Witika:
Pardon, to jsem přehlédl. „Pomohlo by, kdyby nám bylo povězeno, o co se zasilatel tématu snaží.“ Přesně tak. On si místo toho klidně spí. Kdyby na sebe nechal telefon, mohli bychom mu teď zavolat a zeptat se ho. |
||
| Witiko Profil |
#15 · Zasláno: 20. 7. 2011, 03:03:59
Chamurappi:
„mohli bychom mu teď zavolat a zeptat se ho“ Mohli bychom po něm po telefonu požadovat živou ukázku. :-) |
||
| Chamurappi Profil |
#16 · Zasláno: 20. 7. 2011, 03:08:54
Reaguji na Witika:
Nebo za ním můžeme dojet do Kladna. (Teď mi vrtá hlavou, proč má ukrajinskou IP adresu.) |
||
| DarkMeni Profil |
#17 · Zasláno: 21. 7. 2011, 16:27:25
Chamurappi:
Vau, jak jsi poznal že bydlím na Kladně? (Mam pocit že sem to tu nikde nepsal) A jde mi o to že se pokoušim si udělat nějaký prohlížeč obrázků, a možnost navigace i šipkami, takže po kliknutí na galerii, nebo na obrázek, který by měl nastavený zahrnutí do navigace i ostatní obrázky, které mají stejnou třídu, tak aby to vytvořilo takovou navigaci s těmi obrázky a prohlížet bylo možné kliknutím na ten obrázek, nebo stisknutím šipky, ale aby jsem věděl na který obrázek má skript přepnout, by sem měl vědět, který obrázek je teď zobrazený, a na to potřebuju tu "informaci" kterou uložim i do zobrazenýho obrázku, a po stisknutí šipky, ji vytáhnu a zobrazim ten obrázek, který má v náhledu pořadí buď o jedno větší, nebo menší. Doufám že to někdo pochopyl, a kdyby to šlo udělat jinak a líp než to mám, tak sem s tím. (Na Witikiho kód jsem koukal, ale z nějakého důvodu mi zapisování vlastností při vytváření navigace nefunguje, to je to na co jsem se ptal úplně na začátku, když dám onclick v innerHTML tak to reaguje, když jako "element.onclick = function(){alert('funguju?');};" tak nic. Možná proto že je to v cyklu for?). Kdyby jste furt měli pocit že sem mam dát živou ukázku tak to pak někam zkusim dát na net. |
||
| Witiko Profil |
#18 · Zasláno: 21. 7. 2011, 17:04:52 · Upravil/a: Witiko
DarkMeni:
„Na Witikiho kód jsem koukal“ Witiko bez Witika jako pán bez pána. „zapisování vlastností při vytváření navigace nefunguje … možná proto že je to v cyklu for?“ Nejspíš protože tam máš chybu. Poděl se s námi o ten cyklus a možná ti i pomůžeme. :-) |
||
| DarkMeni Profil |
#19 · Zasláno: 21. 7. 2011, 17:57:24 · Upravil/a: DarkMeni
Cyklus vypadá asi takto:
1 var Pictures = document.getElementsByClassName(Class); var Pictures = document.getElementsByClassName(Class);
for(var I = 0; I < Pictures.length; I++){
var Picture = Pictures[I];
document.getElementById('DHTML-Preview-Tr').innerHTML += ''
+'<td class="DHTML-Preview-Td">'
+'<img src="loader.gif" order="'+I+'" class="DHTML-Preview-Picture" alt="'+Picture.alt+'" id="DHTML-Preview-'+I+'" onclick="DHTML.Pictures(this.src, this.getAttribute(\'order\'), this.alt);"/>'
+'</td>';
var ThisPicture = document.getElementById('DHTML-Preview-'+I);
ThisPicture.onclick = function(){
alert('Přepsaný?');
}
ThisPicture.order = I;
var LoadPicture = new Image();
LoadPicture.src = Picture.src;
LoadPicture.alt = Picture.alt;
LoadPicture.order = I;
LoadPicture.onload = function(){
if(document.getElementById('DHTML-Preview-'+this.order)){
var Preview = document.getElementById('DHTML-Preview-'+this.order);
Preview.src = this.src;
Preview.alt = this.alt;
if(document.getElementById('DHTML-Picture-'+this.order)){
document.getElementById('DHTML-Picture-'+this.order).src = this.src;
DHTML.PicturesResize();
DHTML.Move(document.getElementById('DHTML-Window'));
}
}
};
/*
Create, Class a Element jsou argumenty, ale to vám asi dojde že?
*/
Tohle tam mam jen pro test, po kliknutí by měla vyskočit hláška "Přepsaný?", že? Nebo to mam nějak špatně napsaný, ale po kliknutí se místo hlášky změní obrázek, tak jak to má být, ale když to "nenašroubuju" do innerHTML ale jako vlastnost místo hlášky napíšu to co tam chci, tak se neprovede nic (aspoň co jsem to posledně zkoušel tak se nic neprovedlo). Mám nějakou chybu v cyklu nebo je chyba někde jinde? |
||
| Witiko Profil |
#20 · Zasláno: 21. 7. 2011, 18:43:33 · Upravil/a: Witiko
DarkMeni:
K všeobecné správnosti - proměnné se nedeklarují uvnitř cyklu, ale před ním. Mluvím tu o proměnných LoadPicture, ThisPicture a Picture.
K chybám - to nám pověz ty. Háže ti konzole výjimku? Přidej si do kódu za definici ThisPicture alert a pověz nám, co se nachází v ThisPicture a ThisPicture.onclick.
|
||
| DarkMeni Profil |
#21 · Zasláno: 22. 7. 2011, 16:42:06
Píše to "alert('Přepsaný?');" ale po kliknutí mi to hlášku nevyhodí, ale provede to co mam jako první.
|
||
| Witiko Profil |
#22 · Zasláno: 25. 7. 2011, 01:21:43
DarkMeni:
Naše fóremní věštecká koule je v opravně, takže se budeš asi muset směle vytasit s živou ukázkou. :-) |
||
| peta Profil |
#23 · Zasláno: 25. 7. 2011, 07:42:11
DarkMeni: Mi to prijde, ze to dost motas. Zkus tu ukazku a na ni popis krok za krokem, co se ma udelat, aby to neco delalo. Co to dela? A co to delat ma? Ty tam pouzivas nejake tridy, ktere tu nikdo nezna a promenne, ve kterych nikdo nevi, co mas ulozene a bez ukazky si je nemuze ani alertnout.
Treba by se te mohl clovek zeptat, proc toto opakujes 2x? document.getElementById('DHTML-Picture-'+this.order)document.getElementById('DHTML-Picture-'+this.order)Pocet vzniku moznych chyb se tim dvojnasobi. Proc tady mas tolik this a neresis to az uvnitr? DHTML.Pictures(this.src, this.getAttribute(\'order\'), this.alt);DHTML.Pictures(this.src, this.getAttribute(\'order\'), this.alt);"po kliknutí by měla vyskočit hláška "Přepsaný?", že? " (vubec cely tvuj popis je nesrozumitelny) Po kliknuti na co, kde? Zadny html prvek tam nevidim. for(var I = 0; I < Pictures.length; I++){ ... var ThisPicture = document.getElementById('DHTML-Preview-'+I); ... alert(document.getElementById('DHTML-Preview-0)); // co to zobrazi? DarkMeni "Vau, jak jsi poznal že bydlím na Kladně?" Odpoved: Chamurappi Moderátor #16 · Zasláno: 20.7.2011 03:08:54 Odpovědět Citovat Reaguji na Witika: Nebo za ním můžeme dojet do Kladna. (Teď mi vrtá hlavou, proč má ukrajinskou IP adresu.) // Je to admin fora, takze ma pristup k ip adresam, ktere se ukladaji pri pridani zpravy. Najit misto pripojeni cloveka podle ip ti treba pomuze tento program http://www.ipligence.com/geolocation . si tam pod mapu natukej treba moji 193.84.207.159 |
||
| DarkMeni Profil |
#24 · Zasláno: 25. 7. 2011, 09:10:46
Od první otázky mi jde jen o to, zjistit, proč:
1//Tady "onclick" funguje: //Tady "onclick" funguje:
document.body.innerHTML += '<table><tr id="element"></tr></table>';
var Element = document.getElementById('element');
for(var i = 0; i < 10; i++){
Element.innerHTML += '<td class="elementClass" onclick="alert(\'Test1\')">'+i+'</td>';
}
for(var i = 0; i < 10; i++){
document.getElementsByClassName('elementClass')[i].onclick = function(){
alert('Test2');
}
}
/*
Ale tady, i když po vypsání do alertu vidim přepsanou hodnotu (Test2), tak stejně po klinkutí
místo hlášky "Test2" vyskočí hláška "Test1" -> Takže se "onclick" nepřepsal.
(Když do innerHTML žádný "onclick" nedám, tak se po kliknutí nestane nic)
*/
document.body.innerHTML += '<table><tr id="element"></tr></table>';
var Element = document.getElementById('element');
for(var i = 0; i < 10; i++){
Element.innerHTML += '<td class="elementClass" onclick="alert(\'Test1\')">'+i+'</td>';
document.getElementsByClassName('elementClass')[i].onclick = function(){
alert('Test2');
}
alert(document.getElementsByClassName('elementClass')[i].onclick);
}
peta: Petře, -> 2x to tam nikde nevidim, javascript není PHP, ve kterým si to v podmínce můžu hned dát do proměnné (aspoň mi to píše syntaxní chyby) takže si to jednou testuju, jestli se element vytvořil, a podruhý si ho ukládám do proměnné. -> U druhý otázky sem ti pro změnu nerozuměl já (uvnitř čeho? -> leda cyklu). Když si fakt myslel uvnitř cyklu tak to sem právě dělal ale nefungovalo mi to. -> Tak ti to vysvětlim, Witik se mě ptal na to, jakou hodnotu "onclick" u toho vytvářeného náhledu (element obrázku) mi napíše alert po kliknutí, a napíše mi "alert("Přepsaný?")", takže by měla vyskočit hláška s obsahem "Přepsaný?", ale nevyskočí, asi se atribut "onclick" nepřepíše a provede se to, co mam v atributu "onclick" v innerHTML. -> Ten alert mi napíše "[object HTMLImageElement]" A moje otázka je teda furt, proč první příklad funguje ale ten druhý, i když je mu hodně podobný, nefunguje. |
||
| _es Profil |
#25 · Zasláno: 25. 7. 2011, 12:47:57
DarkMeni:
Nepoužívaj na pridávanie elementov metódu innerHTML, ale metódy DOM na to určené. Viď aj vysvetlenie tu.
|
||
| DarkMeni Profil |
#26 · Zasláno: 25. 7. 2011, 13:36:16
_es:
„metódy DOM na to určené“ Koukám že javascriptu skoro vůbec nerozumim, jak tam mam teda ty elementy přidávát? innerHTML prej ne a document.write přepíše stránku. |
||
| _es Profil |
#27 · Zasláno: 25. 7. 2011, 13:46:54
DarkMeni:
„jak tam mam teda ty elementy přidávát?“ Vyhľadávače nepoznáš? Okrem iných metód napríklad metódou insertBefore. |
||
| Witiko Profil |
#28 · Zasláno: 25. 7. 2011, 14:26:34 · Upravil/a: Witiko
_es:
Jedná se sice o techniku nedoporučovanou, přesto funkční. Nefunkčnost to tudíž nevysvětluje. DarkMeni: Dej nám živou ukázku. Tzn. kód ve své celistvosti někam nahraj a předej nám odkaz. |
||
| _es Profil |
#29 · Zasláno: 25. 7. 2011, 14:55:52
Witiko:
„Jedná se sice o techniku nedoporučovanou, přesto funkční. Nefunkčnost to tudíž nevysvětluje.“ Sťažuje si na nefunkčnosť udalosti onclick, (možné) vysvetlenie nefunkčnosti je v tom odkazovanom príspevku.
|
||
| Witiko Profil |
#30 · Zasláno: 25. 7. 2011, 16:22:28 · Upravil/a: Witiko
_es:
Pravda, to mě nenapadlo. Přiřazením do onclick dojde ke změně, ale při <code>innerHTML +=</code> dojde k obnovení inline do kódu zapsaných onclick funkcí. Viz.: 1document.body.innerHTML = "<span id=test onclick=alert(1);></span>"; document.body.innerHTML = "<span id=test onclick=alert(1);></span>";
document.getElementById("test").onclick = function() {alert(2);};
document.getElementById("test").onclick(); // Vypíše 2
document.body.innerHTML += ""; // Ekvivalent k "<span id=test onclick=alert(1);></span>" + ""
document.getElementById("test").onclick(); // Vypíše 1Při použití v cyklu smrtící. |
||
|
Téma pokračuje na další straně.
|
|||
0