Avatar billede brinck10 Nybegynder
27. april 2008 - 11:36 Der er 11 kommentarer og
1 løsning

innerHTML i firefox

Hej Eksperter.

Jeg har ledt i godt en time på google nu, uden at finde noget brugbart som hjælper. Ved dette spørgsmål er blevet stillet mange gange, men er der ikke en der vil give mig svaret igen?

Mit problem er således at jeg har dette script, som ikke gidder opdatere teksten i en div, når du klikker på et link. I IE virker det fint, men ikke i firefox.

Mit script er således:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<script type="text/javascript">
        <!---
        function viewMenu(menu, divID)
        {
            if(menu=='Forside'){
                document.getElementById(divID).innerHTML="TEXT";
            }else if(menu=='Galleri'){
                document.getElementById(divID).innerHTML="GALLERI";
            }else if(menu=='Profil'){
                document.getElementById(divID).innerHTML="PROFIL";
            }
        }
        ---->
</script>
</head>
<body>
      <a href="java script:void(0)" onclick="viewMenu('Forside', 'text')">Forside</a>
      <a href="java script:void(0)" onclick="viewMenu('Galleri', 'text')">Galleri</a>
      <a href="java script:void(0)" onclick="viewMenu('Profil', 'text')">Profil</a>
<div id="text">Velkommen til forsiden, tryk på menuen til venstre</div>
</body>
</html>


Et levende eksempel: www.sjfoto.dk/pialdemo/

På forhånd mange tak.
Frederik
Avatar billede w13 Novice
27. april 2008 - 11:50 #1
Når du har problemer i FireFox, så gå op i Tools --> Error Console.

Så får du at vide, at du skal droppe:

        <!---

og:

        ---->
Avatar billede w13 Novice
27. april 2008 - 11:50 #2
Og i øvrigt er innerHTML ikke gyldig i nogen HTML-standard og bliver det bestemt ikke under XHTML.

Så hvis du vil følge standarderne, bør du bruge .firstChild.nodeValue i stedet. :)
Avatar billede w13 Novice
27. april 2008 - 11:51 #3
Du kan også godt beholde:
        <!---
og:
        ---->

Men så skal det da vist være:
        <!--
og:
        -->
Avatar billede brinck10 Nybegynder
27. april 2008 - 11:51 #4
Hej w13.
Vil gerne følge standarderne, men er næsten lige startet på javascript.
Så kan du give mig et eksempel med firstChild.nodeValue?
Avatar billede w13 Novice
27. april 2008 - 11:55 #5
Det kan så i stedet være:

document.getElementById(divID).firstChild.nodeValue="GALLERI";

Altså erstatter jeg bare innerHTML med firstChild.nodeValue.

Det fungerer sådan, at der bl.a. findes HTML-elementer og så findes der tekst-elementer.
Så først hiver du fat i HTML-elementet med getElementById(divID), og så bruger du firstChild til at finde det første element, som HTML-elementet indeholder. I dette tilfælde er det et tekstelement. Og for at ændre på tekstelementets indhold/tekst, bruger man .nodeValue.

Du skal dog være opmærksom på, at man ikke kan indsætte HTML-koder med firstChild.nodeValue - det skal gøres på en helt anden og langt besværligere måde, så hvis du vil bruge HTML-koder i den tekst, du indsætter, bør du nok holde dig til innerHTML lidt endnu. Bare for lethedens skyld.
Avatar billede w13 Novice
27. april 2008 - 11:56 #6
Giver det mening? :)
Avatar billede brinck10 Nybegynder
27. april 2008 - 11:58 #7
Ja.. Har det noget at gøre med !<[CDATA ? :)

Tror jeg som sagt holder mig lidt til innerHTML. Er det kompatibelt med de fleste browsere?
Avatar billede w13 Novice
27. april 2008 - 12:09 #8
Nej, egentlig har det ikke så meget med CDATA at gøre. ;)

"Problemet" med innerHTML er, at det virker i alle moderne browsere, og derfor bruger mange det.

Den helt rigtige metode, er som jeg skrev, at bruge firstChild.nodeValue i stedet, men det virker som sagt kun med ren tekst. F.eks. hvis du indsætter "<b>Hello world</b>", så vil det blive udskrevet sådan - teksten bliver altså ikke fed, men HTML-koden bliver bare skrevet som tekst, så alle kan se den.

Når man vil indsætte HTML-koder, skal man oprette elementerne et ad gangen, og det er det, som kan blive lidt besværligt for en nybegynder.

Så jeg synes, du skal bruge innerHTML lidt endnu, men forberede dig på en dag at skifte over til det, jeg snakker om, som kaldes "DOM" (Document Object Model).
Det er en moderne teknik i JavaScript, som også virker i alle browsere, og som kommer til at virke i fremtiden også, hvilket innerHTML ikke vil!

Så hvis du nogen steder _ved_, at du kun skal indsætte tekst uden HTML-koder, så husk at bruge firstChild.nodeValue! ;)
Avatar billede brinck10 Nybegynder
27. april 2008 - 12:14 #9
Mange tak :-) Du har fået dine velfortjente point!
Avatar billede roenving Novice
27. april 2008 - 15:56 #10
-- og en simplere måde:

<script type="text/javascript">
function viewMenu(menu, divID){
  document.getElementById(divID).firstChild.nodeValue = menu.toUpperCase();
}
</script>

-- og linkene kan også gøres mere generiske !-)

      <a href="java script:void(0)" onclick="viewMenu(this.firstChild.nodeValue, 'text')">Forside</a>
      <a href="java script:void(0)" onclick="viewMenu(this.firstChild.nodeValue, 'text')">Galleri</a>
      <a href="java script:void(0)" onclick="viewMenu(this.firstChild.nodeValue, 'text')">Profil</a>
Avatar billede w13 Novice
27. april 2008 - 16:07 #11
Roenving>> Jeg tror bare, det var eksempler. Hvis du følger linket, ser det ud til, at han vil indsætte meget mere tekst i boksen end bare "forside" eller "galleri".
Avatar billede brinck10 Nybegynder
27. april 2008 - 19:33 #12
Ja. Siden er færdig nu, eller deromkring --> www.sjfoto.dk/pialdemo/
Endnu en gang tak for hjælpen :-)
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