Il metodo getElementsByName() in Javascript
Il metodo getElementsByName() in Javascript mi permette di interagire con il documento HTML in un modo molto specifico, cercando elementi basati sul loro attributo "name".
document.getElementsByName()
E' particolarmente utile quando lavoro con i moduli form, ma non è limitato a questi.
In generale posso usarlo su qualsiasi insieme di elementi che condividono lo stesso nome.
Questo metodo restituisce una collezione di tutti gli elementi nel documento con il nome specificato.
Il risultato di getElementsByName() è un NodeList, non un array. Una collezione NodeList è simile a un array in alcuni modi, ma con alcune differenze chiave. Ad esempio, posso scorrerlo con un ciclo for o con forEach, ma non posso utilizzare direttamente metodi di array come `map` o `filter` senza convertirlo in un array vero e proprio.
Ecco un esempio pratico.
Questo script monitora gli elementi selezionati dall'utente in una form in tempo reale.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="user_response" value="Si" /> Si<br />
<input type="radio" name="user_response" value="No" /> No<br />
</form>
<div id="responseOutput"></div>
<script>
const responses = document.getElementsByName('user_response');
const responseOutput = document.getElementById('responseOutput');
// Funzione per aggiornare la risposta selezionata
function updateSelectedResponse() {
let selectedResponse = null;
for (let i = 0; i < responses.length; i++) {
if (responses[i].checked) {
selectedResponse = responses[i].value;
break; // Fermiamo il ciclo una volta trovato l'elemento selezionato
}
}
responseOutput.textContent = 'La risposta selezionata è: ' + selectedResponse;
}
// Aggiungiamo un ascoltatore di eventi a ciascun elemento radio
for (let i = 0; i < responses.length; i++) {
responses[i].addEventListener('change', updateSelectedResponse);
}
// Chiamiamo la funzione manualmente per impostare il valore iniziale
updateSelectedResponse();
</script>
</body>
</html>
In questo script, ho definito una funzione updateSelectedResponse per determinare quale radio button è selezionato.
Poiché questo metodo cerca attraverso tutto il documento. Quindi è importante avere nomi univoci all'interno di un contesto per evitare conflitti.
Ho collegato questa funzione a un ascoltatore di eventi change su ciascun elemento radio.
Questo significa che ogni volta che l'utente seleziona una diversa opzione radio, la funzione updateSelectedResponse viene automaticamente chiamata per aggiornare la risposta visualizzata.
Ad esempio, prova a selezionare uno dei due pulsanti:
E così via.
