Problema con appendChild() ed innerHTML()

[orion91]

Ragazzi ho bisogno di fare un controllo su di un campo di un form, nello specifico il controllo viene fatto quando il focus passa su di un altro campo. Ho creato la funzione per il controllo adesso mi stavo concentrando sulla funzione di stampa eventuale errore.

Nella pagina html ho un blocco tipo questo in un form:

<div id="mail">                     
   Email:
                     
   <input type="text" id="Email" onBlur="checkEmail(this)" onFocus="ResetStatusFor(this)"/>
</div>

La funzione javascript della stampa errore è questa:

function setStatusFor(element,message,status)
{
    var elem_stato;
    var target = "stato" + element.id;
    var forInsert;
    elem_stato = document.createElement("span");
    elem_stato.setAttribute("id","checkStatus");
    elem_stato.setAttribute("name",target);
    document.getElementById("mail").appendChild(elem_stato);
      
    if (status == true)
    {
        forInsert = "<img src=\"rejected.png\" />" + message;
    }
    else
    {
        forInsert = "<img src=\"accepted.png\" />";
    } 
    
    document.getElementsByName(target).innerHTML = forInsert;
}

Ma niente non viene stampato il messaggio ne appare l'immagine png specificata nel tag <img>, insomma non viene aggiunto alcun nodo span nel div ne tanto meno tutto il resto...

La funzione in questione, quella di stampa incriminata, viene chiamata direttamente dalla CheckEmail(). I parametri sono l'elemento inputbox del form di cui leggo id, una stringa che contiene il messaggio di errore e lo stato di errore che è un booleano.

Errori sintattici non ne vedo.. qualche idea su come risolvere?

Grazie mille e saluti, Carlo.

[cavicchiandrea]

Non esiste getElementsByName verifica imposta l'elemento con l'Id.

[Straystudios]

O meglio, esiste ma va usato con circospezione.
In primo luogo, lo dovresti accompagnare da un numeretto tra due quadre, del tipo:

document.getElementsByName(target)[0].innerHTML = forInsert;

in quanto getElementsByName definisce un Array (prepara una lista) di tutti gli Elementi aventi name="cheNome" e li enumera partendo da zero; se c'è un solo Elemento che risponde a quel NAME farà un Array di un solo articolo, ma sempre di un [numero] avrà bisogno per individuarlo.
Con: getElementsByName(target)[0] ottieni il primo (secondo l' ordine in cui son scritti nel Codice).

Va poi rilevato che non tutti i Browser supportano getElementsByName("which")[n] per tutti gli Elementi; nel tuo caso potrebbe trattarsi di un DIV e per questo IExplorer non lo riconosce.

getElementById("") invece è univoco e per taluni versi, più affidabile.


Poi riscontro:
var target = "stato" + element.id;
con element.id per il quale mi ritiro in meditazione ....

[orion91]

Per prima cosa ti ringrazio molto per l'interessamento ed i suggerimenti che mi hai dato, purtroppo è la mia prima esperienza massiva con javascript e quindi magari qualcosa ancora mi sfugge anche se sto leggendo un po in giro quanto riesco a trovare.

Ho provato a fare qualche modifica, seguendo in parte i tuoi suggerimenti ed adesso la funzione risulta essere la seguente:

function setStatusFor(element,message,status)
{
    var elem_stato;
    var target = "stato" + element.id;
    var forInsert;
    elem_stato = document.createElement('span');
    elem_stato.setAttribute("id",target);
    document.getElementById("mail").appendChild(elem_stato);
    
    alert("Valore status: " + status);
      
    if (status == true)
    {
        forInsert = "<img src=\"rejected.png\" />" + message;
    }
    else
    {
        forInsert = "<img src=\"accepted.png\" />";
    } 
    
    document.getElementsById(target).innerHTML = forInsert;

Praticamente ho tolto questa cosa del "name" ed ho lasciato solo gli ID. La variabile target me la costruisco per avere più dinamicità, a seconda del campo del form che chiama la funzione, nel mio caso il parametro "element" mi prendo l'id di quest'ultimo, in questo modo quando creo il nuovo nodo gli do un id specifico, ad esempio "stato" + "Email" così ché posso gestire meglio dove e come fare apparire i messaggi nella pagina. Spero che adesso la cosa sia più chiara.

Comunque anche con queste modifiche che ho fatto sopra niente da fare, non mi appare nulla accanto al campo del form, come se il nodo non venisse creato.
Magari potri mettere qualche controllo per verificare se il nodo è stato creato non so.. suggerimenti?

Se invece di usare getElementById faccio le modifiche con document.body.<target>.innerHTML cambierebbe qualcosa? Ci sono controindicazioni?