Avatar billede playr Nybegynder
07. april 2007 - 05:57 Der er 6 kommentarer

Udskrive tekst med document.getElementById

Godmorgen (Eller nat for nogen af jer) ^^

Jeg har denne her kode til at vise et billede:

<img src="billede.jpg" onclick="document.getElementById('bigPic').setAttribute('src',this.getAttribute('src').replace(/_small/,''));">

For at udskrive det bruger jeg:
<img src="billede.jpg" id="bigPic">

Hvordan gør jeg så den også udskriver noget tekst under billedet? Har slet ingen erfaring med javascript, men prøvede med:

<img src="billede.jpg" onclick="document.getElementById('bigPic').setAttribute('src',this.getAttribute('src').replace(/_small/,'')); document.getElementById('showText').document.write('Hej med dig');">

Og så udskrive det med:

<p id="showText"></p>

Virker ikke så må være helt gal på den? :)
Avatar billede dmcn Praktikant
07. april 2007 - 09:20 #1
Prøv:
<img src="billede.jpg" onclick="document.getElementById('bigPic').setAttribute('src',this.getAttribute('src').replace(/_small/,'')); document.getElementById('showText').innerHTML = 'Hej med dig';">
Avatar billede roenving Novice
07. april 2007 - 12:16 #2
-- og med korrekt DOM-behandling bliver det:

<img src="billede.jpg" onclick="document.getElementById('bigPic').setAttribute('src',this.getAttribute('src').replace(/_small/,'')); document.getElementById('showText').firstChild.nodeValue = 'Hej med dig';">

-- det kræver dog at firstCild-noden findes, så:

<p id="showText">&nbsp;</p>
Avatar billede playr Nybegynder
07. april 2007 - 17:12 #3
roenving, din virker. Lav svar, tak.

Kan du fortælle mig hvad det firstChild er med i købet?
Avatar billede roenving Novice
07. april 2007 - 23:45 #4
Min er sådan set ikke forskellig fra dmcns, så hun/han bør også have point i dette spil ...

-- men innerHTML har aldrig fundtes i nogen standard, så hvis man på et senere tidspunkt vil have lyst til at skifte til en nyere html-standard, behøver man ikke at ændre en detalje i et script, hvis man bruger korrekt DOM (Document Object Model !-)

-- den simpleste korrekte DOM-behandling er ovenstående, hvor man erstatter indholdet i en textNode med et andet indhold, men det kræver selvfølgelig, at denne textNode findes ...

-- ellers skal man ud i at appende en ny textNode, som man opretter til formålet (og evt. fjerne eksisterende først !-)

Velbekomme '-)
Avatar billede dmcn Praktikant
08. april 2007 - 13:19 #5
Jeg springer over her, roenving kom jo med den _korrekte_ løsning. :)
Jeg kan dog kraftigt anbefale at bruge jQuery (www.jquery.com) til denne type arbejde - det er et kraftigt library, der gør manipulering af DOM o.l. til en leg. :)
Avatar billede olebole Juniormester
10. april 2007 - 15:34 #6
<ole>

jQuery gør DOM til en dårlig leg!  ;o)

Når man bruger DOM (og ikke mindst i forbindelse med AJAX), er det yderst vigtigt at tage hensyn til memory-leaks. Det gør jQuery ikke ... den kaster bunker af god hukommelse right-down-the-drain i IE.

Sådan er det ofte med den slags libraries ... man mister kontrollen over koden og det er ikke godt, hvis bibliotekets 'forfatter' ikke er god til at kode  :o|

/mvh
</bole>
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