Avatar billede mike2002 Nybegynder
30. august 2009 - 10:51 Der er 5 kommentarer og
1 løsning

appnedChild og derefter removeChild

Hej eksperter

Jeg har en form med en masse input felter. Nogle er påkrævet at udfylde, og jeg vil gerne have, at der vises en fejl-tekst ved det felt, der ikke er udfyldt, hvis man prøver at sende formen. Det er standard de fleste steder, så det vil jeg også gerne have.

Jeg bruger <dl>, <dt> og <dd> til at liste mine felter med (input felter er i <dd>.

Hvis der mangler at blive udfyldt et felt, bruger jeg appendChild til at sætte et ekstra sæt <dt> og <dd> ind, og fejlmeddelelsen vises i <dd> elementet.

Mit problem er, at jeg gerne vil fjerne dette element igen, når brugeren sender formen igen, fordi der ellers kommer til at stå den samme fejlmeddelelse to gange under det input-felt der er fejl i. Men jeg ved ikke hvordan... Er der en funktion til at fjerne alle tilføjede elementer? Eller skal jeg gå en helt anden vej?

Min funktion:
function writeErrMsg(frmId,elmNm,errMsg) {
    // Function to append specified error message to the specified field
    var errelem1 = document.createElement('dt');
    errelem1.id = 'errelem1';
    errelem1.innerHTML = '&nbsp';
    var errelem2 = document.createElement('dd');
    errelem2.id = 'errelem2';
    errelem2.innerHTML = errMsg;
    var allElms = document.getElementById(frmId).elements;
    alert(allElms);
    for(var n=0; n < allElms.length; n++)
    {
        if(allElms[n].name == elmNm)
        {
            allElms[n].parentNode.removeChild;
              allElms[n].parentNode.appendChild(errelem1);
            allElms[n].parentNode.appendChild(errelem2);
            var pos = findPos(allElms[n]);
            window.scrollTo(0,pos);
            return;
        }
    }
}

Det kan godt være, at det er noget "cowboy-kode", men jeg er ret ny i DOM ;-). Måske skal det gøres på en helt anden måde...?

Michael
Avatar billede olebole Juniormester
30. august 2009 - 13:00 #1
<ole>

innerHTML har endnu aldrig været del af nogen standard (heller ikke DOM) - og skulle den engang komme med i en standard, vil man stadig skulle være overordentlig forsigtig med at bruge den. Den overskriver - i modsætning til DOM-metoderne - dokumetfragmentet, den bruges på, hvilket meget ofte vil være katastrofalt.

Et element oprettes med createElement og indsættes f.eks. med appendChild.
En tekstnode oprettes med createTextNode og indsættes f.eks. med appendChild.

Det kunne f.eks. være:


var oElm = document.createElement("div");
var oTxt = document.createTextNode("En eller anden tekst");
oElm.appendChild(oTxt);
document.getElementsByTagName("body")[0].appendChild(oElm);



Alle attributter sættes med setAttribute - og aflæses med getAttribute. De sættes/læses ikke direkte på elementet:


Sådan:
    errelem1.setAttribute('id', 'errelem1');
- ikke sådan:
    errelem1.id = 'errelem1';

Sådan:
    if (allElms[n].getAttribute('name') == elmNm)
- ikke sådan:
    if (allElms[n].name == elmNm)



Udover 'cowboykoderne', så er removeChild en metode på ethvert DOM-element - og metoden tager ét argument: Elementet, der skal fjernes. Du fjerner altså et element med f.eks:

ELEMENT.parentNode.removeChild(ELEMENT)


Det betyder, at der, hvor du prøver at fjerne elementet, nok skal stå:

allElms[n].parentNode.removeChild(allElms[n]);


/mvh
</bole>
Avatar billede mike2002 Nybegynder
30. august 2009 - 13:12 #2
Hej Ole
Du er bare altid super!

Jeg mener dog at kunne huske, at FF ikke ville tage imod fx.
errelem1.setAttribute('class','myclass');
men hellere ville have
errelem1.className = 'myclass';
men måske husker jeg forkert...?

Jeg prøver lige dine forslag. Tak!
Avatar billede olebole Juniormester
30. august 2009 - 14:33 #3
Nej, Firefox har i mange år accepteret den rigtige måde at sætte/læse classes på, men IE er problembarnet. Indtil IE8 har den insisteret på:


ELEMENT.className = "MinKlasse";

- eller:

ELEMENT.setAttribute("className", "MinKlasse");



Den første er DOM Level 1 og IDL (Interface Definition Language), mens den anden er en bastard mellem IDL og:

ELEMENT.setAttribute("class", "MinKlasse");


- som hører til den nyere DOM Level 2.

Som sagt er det fixed fra og med IE8, men det kræver stadig forskelsbehandling mellem browserne. Der er således i dag stadig flere, som bruger IE6, end Firefox  :o|

Et andet problem er dynamiske værdier. Brugerændringer må ikke afspejles i et elements attributter - og kan derfor ikke aflæses med getAttribute. Formfelters value og checked attributter må således ikke kunne aflæses med getAttribute - hvilket i øjeblikket spiller standarderne ud mod hinanden.

Den 'gode' nyhed er, at det formodentlig bliver adresseret i HTML5, som påregnes færdig i 2012!  :o|
Avatar billede mike2002 Nybegynder
30. august 2009 - 20:47 #4
Jeps, det er også rigtigt. Det var den anden vej rundt. Koden virkede netop ikke i Firefox, da jeg også tidligere har brugt:
ELEMENT.className = 'minklass'

Jeg er ikke helt færdig med det her, men jeg skal nok poste min løsning.

-> Ole: samler du stadig ikke på points?
Avatar billede olebole Juniormester
31. august 2009 - 10:33 #5
Jo, det er erikjacobsen, der er 'fanatisk' modstander af at modtage points. Jeg modtager gerne, når jeg synes, jeg har leveret ... så her mener jeg godt, jeg kan tillade mig at lægge et svar  =)

Jeg må ærligt erkende, at jeg stadig bruger DOM Level 1 til:


ELEMENT.className = "MinKlasse";

- og:

var inputValue = ELEMENT.value;

Avatar billede mike2002 Nybegynder
31. oktober 2009 - 21:09 #6
Ups, så glemte man lige sit spørgsmål...

Jeg fik løst det hele ved at lave differentieret scripts, vha. navigator.appName (så vidt jeg kan huske). Og i stedet for at fjerne elementer med removeChild - da det jo kan være lidt svært altid at ramme de rigtige elementer - sørgede jeg for at de elementer, der skulle fjernes havde en unik klasse, fx 'errorTxt', og brugte så [object].style.display = 'none' på alle med netop denne klasse.

Måske ikke den optimale løsning, men det virker.

Jeg mener at have læst et sted, at man skal holde sig fra navigator.appName og i stedet forsøge sig med document.all (=IE) og ellers =FF (og andre browsere, der overholder standarden). Hvis nogen har noget at sige i den forbindelse, ville det være cool (men der er altså ikke flere points i det her spørgsmål....).
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester