campo non presente nel form

[Gae]

Salve, da poco uso JS e non capisco come risolvere questo problema.
Ho una funzione js

async function cercaInTable( chiChiama, cercaMono ) {
let url;

/* Filtra i dati in base all'input o alla select */
const input = document.getElementById('cercaTable').value;
const select = document.querySelector('select[name="cercaRegioneTable"]').value;
print('sele ')
}

Che viene richiamata da un bottone di una form.
Mentre il campo del primo rigo é presente in tutte le form, il secondo solo in alcune.
Per le form che hanno solo il primo campo la print non viene stampata e l'elaborazione si blocca.
Dovrei prima controllare se il campo sella select esistse e se vero elaborarla.
Qual'é la giusta soluzione ?
Grazie

 

[WmbertSea]

Ciao, come dici, il problema è più che altro in questa parte:

document.querySelector('select[name="cercaRegioneTable"]').value;

Il metodo querySelector restituisce l'elemento trovato solo quando questo è presente nel DOM, altrimenti restituisce un valore null.

E' chiaro che il valore null NON ha alcuna proprietà, tanto meno la proprietà value. Dal momento che stai tentando di accedere ad una qualsivoglia proprietà di un valore null, l'interprete JavaScript genera un errore che interrompe lo script.

Puoi risolvere in vari modi, più o meno adeguati a seconda del contesto, ad esempio con una semplice condizione puoi controllare preventivamente che l'elemento sia trovato per poi accedere eventualmente alle sue proprietà ed elaborare ciò che ti serve, come hai suggerito tu stesso.

Analogamente potresti risolvere con un operatore ternario con cui assegnare un valore alla variabile select che, nel caso l'elemento non esista, restituisca comunque un certo valore, ad esempio undefined.

const select = document.querySelector('select[name="cercaRegioneTable"]') ? document.querySelector('select[name="cercaRegioneTable"]').value : undefined;

Un sistema analogo ma più recente (introdotto con ECMAScript 2020) è l'uso del costrutto ?. (cosiddetto operatore di concatenamento opzionale, vedi documentazioni online) che risolve lo script in modo più sintetico:

const select = document.querySelector('select[name="cercaRegioneTable"]')?.value;

Nota la sintassi "?." che permette di accedere alla proprietà a seguire solo quando l'oggetto esiste, altrimenti sarà restituito un valore undefined.

Ancora, un altro sistema ingegnoso (usato quando ancora non esisteva il concatenamento opzionale) prevede l'uso dell'operatore || (OR logico) per creare un oggetto al volo (anche vuoto) qualora l'oggetto iniziale sia nullo o inesistente:

const select = (document.querySelector('select[name="cercaRegioneTable"]') || {}).value;

in questo caso sarà restituito un valore undefined perché l'oggetto vuoto non possiede la proprietà value, tuttavia non saranno generati errori.

... e altri eventuali sistemi simili.

Nel tuo caso, se devi escludere tutta una parte di script che fa riferimento a quella costante, forse è più adeguato il primo metodo, porre una semplice condizione if con cui far eseguire tale script solo se l'elemento esiste.

Vedi tu come ti sembra meglio.
Buon proseguimento.

 

[Gae]

Provato il più recente e funziona
Grazie sia per la soluzione che le completa esposizione