Newsgroup: it.comp.lang.javascript
Titolo: createElement e onClick

Salve,
premetto che ho cercato nel ng qualche vecchio post, ma non mi soddisfa ciò che 
ho letto.
Riassumo:
sto tentando di creare degli <a> tramite createElement.
Quello che vorrei sarebbe crearlo in modo fosse equivalente a
	<a href="" onClick="alert('ciao')">dimmi ciao</a>
ciò che ho scritto è
	var theA;
	theA=document.createElement("A");
	theA.href="#";
 
 
	var theText;
	theText=document.createTextNode("dimmi ciao");
	theA.appendChild(theText);
 
	document.body.appendChild(theA);
 
Per aggiungere l'evento ho provato
	theA.onClick="alert('ciao');";
ma ovviamente non funge, quindi ho tentato
	theA.addEventListener("click", prova, false);
dove "prova" è una mia function.
Questo ovviamente
1) Mi funziona solo in FF (almeno IE mi dice "Proprietà o metodo non supportati 
dall'oggetto")
2) Non capisco come passare dei parametri alla function (se li metto 
direttamente nell' addEventListener, mi viene eseguito immediatamente 
sull'onLoad e non più sul click)
3) Potrei provare con una createAttribute/setAttribute, ma non vorrei che ciò 
non fosse supportato da alcuni browser (non ho provato questa strada)
Mi sapete dare delucidazioni? Vorrei evitare quanto più possibile di dover 
testare quale browser sto usando a runtime...
TIA

 non fosse supportato da alcuni browser (non ho provato questa strada)
Evita (vedi mio messaggio "STUDI[...]" 2 messaggi sopra questo,
setAttribute non va con IE ed eventi, tutto ok con Mozilla)
-- 
"E' l' ignoranza che crea l'intolleranza
 di gente cieca e senza coscienza"
									  S.S.S.

On Fri, 04 Feb 2005 12:06:22 +0100, Francesco N. Vespucci wrote:
Ci sono cascato anch'io la prima volta:
onclick non onClick
Ciò che ha fregato me quella volta è stato che nella maggior parte delle
guide HTML l'evento associato al tag è indicato come onClick. Non è la
stessa cosa in javascript. Gli eventi sono tutti minuscoli, sempre. In
fondo non sono gli unici attributi che cambiano da HTML a javascript,
pensa a class che in javascript per ovvie ragioni è className.
Tra l'altro l'assegnazione di una funzione al
membro onclick è il metodo che ti assicura la massima portabilità (oggi
come oggi).
Ciao.
	-Ema-

 DOM?)
Allora, un problema era sicuramente il case (chiedo venia).
Il codice è mutato così
	var theA;
	theA=document.createElement("a");
	theA.href="#";
Ora ho testato tre o quattro possibilità
	theA.onclick="alert('ciao');";
//Niente da fare, ma nel DOM inspector compare tra le proprietà
	theA.onclick=prova;
//prova è una funzione con parametro che fa l'alert del parametro, e qui l'alert 
mi da [object Event] o undefined (rispettivamente FF e IE)
	theA.onclick=prova('ciao');
//con la stessa funzione, viene eseguita sull'onload della pagina e poi non più 
sul click
	theA.onclick=function() { alert(testo); }
//funge solo se testo è una var globale
A questo punto non so come procedere!
La situazione reale è che ho una funzione ben definita, con parametri, e deve 
essere richiamata sull'onclick del <a>, quindi nessuna delle strade su indicate 
mi serve.
La stessa situazione deve essere replicata anche per altri tag img.
Sto provando questa strada come alternativa a document.write o innerHTML, ma sto 
quasi per abbandonare...
Qualche altro suggerimento? Dove e come esattamente potrei provare a usare 
settimeout?
PS Il risultato con document.write è questo (abbastanza grezzo, ma soddisfacente 
dal lato dell'utilizzo di OO)
http://www.sit-puglia.it/fnv/webmapobj/index.htm

 DOM?)
Allora, un problema era sicuramente il case (chiedo venia).


 testare quale browser sto usando a runtime...
La pratica del browser sniffing dovrebbe rimanere laddove si trova, nella
"storia" dello sviluppo web; al suo posto va usato l'object checking.
-- 
ZER0://coder.gfxer.web-designer/
~ Il computer e' una macchina progettata per velocizzare e automatizzare
gli errori.
on air ~ "Gianluca Grignani - Che ne sarà di noi"

 settimeout?
come sopra, ma con un setTimeout, del tipo 
 setTimeout("theA.onclick=\"alert('ciao');\"",1000);
(theA deve essere dichiarata globale, altrimenti dovrai sostituirla con
document.getElementById('idtuoanchor'))
Solo supposizioni, come ti dicevo non ci ha [quasi] mai messo mano...
-- 
"That until there is no longer first class
And second class citizens of any nation
Until the colour of a man's skin
Is of no more significance than the colour of his eyes
Me say war"
B.M.

 creare prima l'oggetto.
Guarda che ti stai confondendo. Qui non stai assegnando un attributo, ma
stai impostando direttamente l'event-handler. Quindi devi passargli un
riferimento a funzione, non una stringa.


 riferimento a funzione, non una stringa.
Sono quasi certo (ma ho purtroppo il sorgente a casa) che così funziona
(IE6-mozillanonsocheversione), su oggetti già presenti nella pagina al
momento del caricamento.
Nei miei test, dopo aver constatato che IE non funzionava con setAttribute
e onclick, ero passato per eventi a questa sintassi.
Quasi certo=99% perché ho fatto 2000 test ieri e magari potrei ricordare
male.
-- 
"Emancipate yourselves from mental slavery;
None but ourselves can free our minds"
									    B.M.

 strada)
Se non c'è un motivo particolare sarebbe preferibile utilizzare
direttamente l'impostazione diretta della proprietà. "setAttribute"
diventa necessario quando si usa un linguaggio diverso, tipo Java,
dove questo metodo di impostare al volo le proprità di un oggetto
non è applicabile.
Gaetano

 document.body.appendChild(theA);
Dunque, appurato che ciò funge, passiamo al caso reale, magari sto sbagliando 
completamente strada, oppure tutto ciò non è fattibile
La pagina risultante dovrebbe essere questa (ovviamente è un esempio aderente 
alla realtà in quanto ci sono un po' di oggetti JS da me creati dietro):
<script>
var theMap="Mappa"; //In realtà questo è un oggetto con Metodi e Proprietà
var theLayer1="Uno"; //Stesso discorso
var theLayer2="Due"; //Stesso discorso
function fnvSelectNode(theMap,theLayer) {
	//Per semplicità inserisco un alert, ma la logica è più complessa
	alert('Layer '+theLayer+' della Mappa '+theMap);
}
</script>
<a href="#" onClick="fnvSelectNode(theMap,theLayer1)" id="aUno">Layer Uno</a>
<a href="#" onClick="fnvSelectNode(theMap,theLayer2)" id="aDue">Layer Due</a>
Ora, fermo restando la parte di script, il resto, per ora ottenuto con 
document.write, ma in procinto di convertire in innerHTML se il discorso in 
oggetto non funge, sarebbe:
	var theA;
	var theText;
 
	theA=document.createElement('a');
	theA.id='a'+theLayer1;
	theA.href='#';
	theA.onclick=.....;
 
	theText=document.createTextNode("Layer Uno");
	theA.appendChild(theText);
	document.body.appendChild(theA);
 
	theA=document.createElement('a');
	theA.id='a'+theLayer2;
	theA.href='#';
	theA.onclick=......;
 
	theText=document.createTextNode("Layer Due");
	theA.appendChild(theText);
	document.body.appendChild(theA);
 
	theA=null;
	theText=null;
Il tutto è inserito in una funzione che crea l'elemento, e a cui vengono passati 
i parametri.
Le righe incriminate dovrebbero essere
theA.onclick=fnvSelectNode;
e nel momento in cui l'utente clicka prenderebbe come parametri quelle che si 
trovano nello scope più vicino? No, perchè così mi da undefined...
Quindi come va il tutto?
Questo giusto perchè sono de' coccio, e mi piace riepilogare ogni tanto...
Come potete capire non posso, e non voglio dover definire .onclick=function.... 
ogni volta, o simili.
TIA

 document.body.appendChild(theA);
Dunque, appurato che ciò funge, passiamo al caso reale, magari sto sbagliando 


In data Fri, 4 Feb 2005 13:48:05 +0100, Cristiano Larghi ha scritto:
GRRRRRRRR
(che fatica a scrivere...)
OK, HAI RAGIONE
delle 2000 prove e test mi ricordavo quella sbagliata
mi cospargo il capo di ceneri e stasera entrerò nel locale in ginocchio sui
ceci... :-/
-- 
"Affacciati affacciati benedici, guardaci
 guardaci...guardaci!
 Tanto sono quasi duemila anni che stai a guardare!"
									    E.B.

 theA.onclick=fnvSelectNode;
Quest'ultima riga non corriponde a quello che hai scritto più sopra.
Proprio come hai scritto inline devi "cablare" il nome dei parametri
dentro una nuova funzione. Per cui il codice equivalente è;
theA.onclick = function() { fvnSelectNode(theMap, theLayer1); };
(L'event handler infatti viene invocato senza parametri attuali.)
Se i nomi non li puoi cablare perché sono contenuti dentro un'altra
variabile devi ricorrere all'oggetto Function. Es.:
mapObjectName = "theMap";
layerObjectName = "theLayer1";
theA.onclick = new Function("fvnSelectNode(" + mapObjectName +
   " , " + layerObjectName + ");");
Se generi il tutto lato server e i nomi degli oggetti li hai dentro
delle variabili lato server la prima forma dovrebbe comunque andare
bene.
Gaetano

 elem.onclick = = new Function(par1, par2, "prova(par1, par2);");
Ho ricontrollato e questo non funziona. Ci sono due errori.
Innanzitutto per primi devono essere passati i nomi dei parametri
e non i loro valori. Dovrebbe quindi essere:
var myFunction = new Function("par1", "par2", "prova(par1, par2)");
In secondo luogo poi la funzione deve essere chiamata con i parametri
attuali giusti, quindi ad esempio come:
myFunction(1, 2);
e invece se la imposto semplicemente come event handler del "onclick"
la funzione viene chiamata senza alcun parametro.
Mi scuso per le inesattezze.
Gaetano