Newsgroup: it.comp.lang.javascript
Titolo: Re: sbaglio io o cosa?

Salve ragazzi,
Come avrete ben capito mi avvicino da poco la mondo javascript e gia'
incontro difficolta.
Vorrei assegnare ad una variabile il valore corrente di un input text,
ma se provo, per esempio, def = document.myForm.myTextInput.value; non
funziona >.<
Sbaglio qualcosa? I nomi sono giusti, ma non saprei proprio >.<
Grazie :)


informazioni mancanti:
1) come hai dichiarato la input text?
2) come hai dichiarato il form?
3) myForm e myInputText sono i valori dell'attributo name o dell'attributo id?
4) dove hai scritto l'assegnamento (nel toplevel, in una funzione, ...)
Detto questo, tiriamo fuori la palla di cristallo (è appena tornata dal 
meccanico, ora la proviamo) :-)
Se definisci la input text in questo modo
<input type="text" name="myInputForm" id="myInputForm" />
quindi specificando l'id, ci puoi accedere in maniera univoca anche senza 
passare dal form con
var myInputText=document.getElementById("myInputText");
e il suo value come
var def = myInputText.value;
oppure come
var def = document.getElementById("myInputText").value;
Considerazioni:
1) l'id _deve_ essere univoco (quindi assegnato ad un solo controllo in 
assoluto) nella pagina (duplicare un id porta a dei comportamenti non 
prevedibili a priori che dipendono, tra le altre cose, dal browser)
2) name e id sono due cose differenti, l'id serve a identificare il controllo 
all'interno dell'albero (x)Html, il name principalmente per le form.
Quindi possono anche avere due valori differenti
3) sarebbe meglio che name e id non inizino con numeri (anche qui il 
comportamento dipende dal browser)
4) in alternativa esiste il metodo di document getElementsByName.
nota la "s" in Elements.
Infatti, mentre l'id è univoco per definizione, il name no.
Scrivere
var myInputText=document.getElementsByName("myInputText");
restituisce una array (sempre) che contiene un elemento per ciascun tag (x)Html 
che ha il nome "myInputText" associato come attributo name.
Se esiste un solo elemento che soddisfa questo criterio, restituisce comunque un 
array che avrà un solo elemento.
In questo caso, la scrittura in una riga diventa
var def = document.getElementsByName("myInputText")[0].value;
Sfera di cristallo in azione: sì, può capitare che si metta intenzionalmente più 
di un controllo con lo stesso nome.
5) Ti potresti trovare un errore del tipo "method not supported" se sbagli a 
scrivere qualcosa e la getElementById torna null o undefined.
Potrebbe essere preferibile la strada con la quale passi dal risultato 
intermedio. (tracciabilità degli errori, se tutto va bene, sono perfettamente 
equivalenti).
La prima strada è anche preferibile (in termini di prestazioni) se accedi 2 o 
più volte al controllo in questione
6) Naturalmente, per accedere alle proprietà di un oggetto, questo oggetto deve 
esistere, quindi inserire l'operazione in toplevel, non sempre può portare ad un 
qualcosa di funzionante. Nello specifico, se il metodo getElementById venisse 
chiamato prima che il browser istanzi il controllo, questa fallisce (non trova 
il controllo). In questi casi, sarebbe meglio legarsi a degli eventi (tipo 
onload della pagina, onclick di un pulsante o di un link, onsubmit di un form, 
ecc.) Ovviamente questo punto va adattato a quello che vuoi fare tu.
Sfera di cristallo in azione: ipotizzo che tu stia utilizzando la riga in un 
evento onsubmit del form
Dimmi se il meccanico mi ha riparato bene la sfera (tra qualche giorno ci sono 
le estrazioni del lotto ^_^ )
Un saluto
LP

Prima di tutto ti ringrazio e mi scuso per non aver rpesentato
sufficienti informazioni XD
Mea culpa, era troppo tardi e non riuscivo a mantenermi :D
Comunque, la mia input text e' formata come <input type="text"
name="textProva" value="1" />, il form con un semplice attributo name,
myForm e myInputText sono attributi name e l'assegnamento e' in una
funzione (uso una variabile def definita nel toplevel).
Non ho provato il getElementById anche perche' sono su Javascript da
pochissimo e quindi non ho studato abbastanza :D
Provo e posto poi i risultati :)
Grazie ancora!
On 15 Apr, 09:26, Luca Pascali <pasckoskyNOS...@TOGLIMI.yahoo.iTt>
wrote:


Grazie per il tutto, ma non risolvo il mio problema >.<
In poche parole, vi spiego la situazione.
Ho due button e un form, strutturati cosi':
<input type="text" name="textProva" id="textProva" value="1" />
<input type="button" name="plus" id="plus" onClick="plusO()"
value="plus" />
<input type="button" name="minus" id="minus" onClick="minusO()"
value="minus" />
Quando clicco su plus, il valore contenuto (che nel codice javascript
viene memorizzato in una variabile chiamata def) nel textProva aumenta
di uno, quando clicco su minus diminuisce di uno. Qui tutto chiaro e
funzionante.
Ho un problema, pero'. L'utente puo' accedere al textProva e
modificare il valore (per ora supponiamo, per assurdo, che l'utente
possa inserire solo numeri). Una volta che l'utente ha modificato il
valore, quando clicca su uno dei button, le operazioni dovrebbero
essere effettuate sul valore corrente (cioe' modificato dall'utente) e
non su quello precedente.
Il codice e' questo:
var def = 1;
function plusO() {
	def = def + 1;
	document.getElementById("textProva").value = def;
}
function minusO() {
	def = def - 1;
	document.getElementById("textProva").value = def;
}
di default def parte da 1, si.
Non saprei proprio come salvare il valore corrente del textInput, dato
che se provo variabile = document.getElementById("textInput").value;
mi ritorna 0 e non il valore >.< Forse sbaglio io?
Grazie per la pazienza :D


 non su quello precedente.
E allora perché hai scritto il codice per agire sul valore memorizzato
nella tua variabile? :)
Scherzi a parte, tre suggerimenti:
1) quando rispondi ai post in un newsgroup, è preferibile riportare il
testo quotato *prima* della tua risposta (cerca "quotar bene" con google e
leggi qualcosa)
2) quando si programma, è cosa buona e giusta fare un po' di analisi
*prima* di iniziare a scrivere codice
3) un tipo di cui mi fido abbastanza dice sempre che non è una buona idea
assegnare il medesimo valore agli attributi name e id
Comunque, se vuoi modificare il valore *corrente* del campo di input, ti
conviene riferirti a questo nelle tue funzioni: la memorizzazione del
"valore precedente" in una variabile (la tua def) perde di senso.
-- 
Nando [?]
Apostolo della Prova

 ha scritto:

Grazie per le delucidazioni :D
Comunque il nome e l'id uguali li ho messi cosi' per prova :)
Riguardo il modificare, appunto! E' questo che voglio fare, ma non
riesco a richiamare il valore dal textInput! Ecco perche' ho messo
quella variabile, anche per provare un'altra cosa :P Grazie comunque
per tutto :D

 ha scritto:

Grazie per le delucidazioni, ma ti spiego perche' avevo aggiunto la
var def.
Il mio code e':
[Javascript]
function addOne() {
	document.getElementById("textProva").value =
document.getElementById("textProva").value + 1;
}
function minusO() {
	document.getElementById("textProva").value =
document.getElementById("textProva").value - 1;
}
----
[Xhtml]
<input type="text" name="textProva" id="textProva" value="1" />
<input type="button" name="plus" id="plus" onClick="addOne()"
value="plus" />
<input type="button" name="minus" id="minus" onClick="minusO()"
value="minus" />
Lasciando perdere l'id etc..., la funzione minusO() e' corretta
(inseriso qualsiasi valore e il utto funge), ma la funzione addOne()
no. Invece di aumentare di 1 il valore, mi accoda un 1 per l'appunto
alla fine del valore. Piu' volte richiamo la funzione, piu' volte mi
accoda un 1 alla fine. E non riesco a capire proprio perche' >.<

 
Accade perchè il + è un operatore che funge sia da operatore algebrico di somma 
per interi, sia per i floating point e anche come concatenatore di stringhe.
Javascript interpreta il .value del controllo come stringa.
Utilizzi l'operatore +
Metti un intero (1).
Ora, il primo operando detta il tipo dell'operazione.
Visto che .value è una stringa, l'operatore + diventa concatenatore di stringhe.
1, pur essendo un intero, viene convertito a stringa.
Risultato?
se nel controllo c'è scritto 54, invece che diventare 55 diventa "541"
Devi convertire il valore in un intero (funziona parseInt).
in termini più pratici,
function addOne() {
	//Per comodità e perchè il metodo getElementById è un po' pesantuccio
	var textProva=document.getElementById("textProva");
	//Prendiamo il valore, convertito in intero e sommiamo un numero intero.
	//Il tutto sostituisce il vecchio valore
	textProva.value=parseInt(textProva.value,10)+1;
}
nota il ",10" (secondo parametro della funzione parseInt)
Anche qui gli sviluppatori di Javascript sono venuti incontro al "ragazzino medio".
Esistono più basi di numerazione (binaria, ternaria, ennaria, ottale, decimale, 
esadecimale, sessagesimale, ecc), basta avere un numero adeguato di simboli e 
fai tutto quello che ti pare.
In informatica se ne usano 4:
Binaria, Ottale, Decimale, Esadecimale.
A parte la binaria, per l'ottale e l'esadecimale esiste un modo per scrivere i 
valori in modo letterale (in alcuni casi anche per la binaria)
Nello specifico
010 è ottale e vale 8 decimale
0x10 è esadecimale e vale 16 decimale
0b10 (per alcuni linguaggi) è binario e vale 2 decimale.
parseInt è intelligente!
Se gli passi "010", restituisce 8!
Se gli passi "018", restituisce 18! (ma allora lo fanno apposta ;-) )
quel 10 come secondo parametro ti permette di forzare la base di numerazione, 
ergo parseInt("010",10) restituisce (come più logicamente prevedibile) 10
Scusa se magari ho detto cose che già sapevi, ma era per avere un discorso completo.
Luca

 accoda un 1 alla fine. E non riesco a capire proprio perche' >.<
Credo converta il numero 1 nella stringa "1"; accade perché l'operatore "+"
è definito anche per le stringhe, ed indica la concatenazione:
"foo"+"bar"="foobar"
Siccome il valore finale dell'espressione deve essere una stringa (in
quanto lo vai ad assegnare al value dell'elemento input) ecco che avviene
la conversione, per cui:
"4"+1 diventa "4"+"1" e quindi "41"
Siccome l'operatore "-" non è definito per le stringhe, ma solo per i
numeri, ecco che tutto va come ti aspettavi in minusO, in quanto
l'interprete javascript converte la stringa in numero per poter eseguire
l'operazione "-":
"4"-1 diventa 4-1 e quindi 3 (che viene poi convertito in "3" ed assegnato
al value dell'elemento input)
Ti suggerisco innanzitutto di dichiarare un riferimento (globale)
all'oggetto che rappresenta l'input, in modo da non dover chiamare ogni
volta il metodo getElementById:
var textFieldRef = null;
window.onload = function() {
  // ... eventuali altre operazioni che devi fare ...
  textFieldRef = document.getElementById("textProva");
};
L'assegnazione conviene farla all'interno del gestore dell'evento load
dell'oggetto window (che si scatena quando la pagina è stata caricata dal
browser) cosicché tu sia sicuro che l'elemento di input esista e sia
accessibile tramite javascript.
Nella funzione addOne, quindi, modifica le istruzioni nel modo seguente:
  textFieldRef.value = (+textFieldRef.value + 1);
Eventualmente, fai lo stesso anche nella minusO (per "coerenza" :-]):
  textFieldRef.value = (+textFieldRef.value - 1);
Il segno "+" anteposto alla stringa textFieldRef.value fa sì che questa
venga convertita in numero.
Concludo suggerendoti di implementare dei controlli di validità
(textFieldRef.value deve essere un numero, ad esempio; inoltre l'utente
potrebbe clickare prima che la pagina sia caricata, nel qual caso
textFieldRef non si riferirebbe all'elemento input ma sarebbe ancora null).


 Accade perchè il + è un operatore che funge [...]
Devo ricordarmi di controllare, prima di rispondere, che qualcuno non
l'abbia già fatto -.-


 
[...]
Ti avrò anche battuto sul tempo di 9 minuti, ma questa sfumatura non la 
conoscevo :-)
LP

 conoscevo :-)
L'ho imparato su questo ng ;)
Comunque, mi sa che abbiamo entrambi scritto una piccola imprecisione.
Abbiamo scritto che, per fare la somma tra una stringa e un numero,
quest'ultimo viene convertito in stringa perché il risultato viene poi
assegnato a una proprietà (attributo value) che è una stringa... mi sa che
non è così: se si "sommano" un numero e una stringa, indipendentemente
dall'ordine degli operandi e dalla "destinazione" del risultato,
l'interprete js converte il numero in stringa e fa la concatenazione. Non
ne sono sicuro, eh, ma credo sia così.


 l'interprete js converte il numero in stringa e fa la concatenazione
Confermo:
  document.getElementById("sel").selectedIndex=("1"+0)
dà errore (se la select ha non più di 11 option :-]).


 L'ho imparato su questo ng ;)
Che, giusto per continuare la dovizia di particolari dei post
precedenti, il "segno più anteposto(...)" ha un nome proprio:
Trattasi del bistrattato "operatore unario" positivo (+), che
a differenza della sua controparte negativa (-), non solo non
è molto usato, ma spesso nemmeno menzionato nelle reference.
La loro funzione, è di convertire l'operando in numero. Va da
sé che nel caso dell'operatore unario "-", il risultato viene
poi negato.
Questo per sottolineare che si tratta di un operatore a sé da
non confondere assolutamente con l'operatore di addizione.
-- 
~ ..ma in effetti il  concetto di WYSIWYG (quello che vedi è quello
che ottieni) si applica ai computer malissimo, così  come si applica
alle  donne... (The  Real Programmer)


Che dire, grazie a tutti :D
Concetti come i sistemi numerici gia' li conosco (in fondo non sono un
newbe :P), ma grazie per l'aiuto con Javascript :)