Søg
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 16:54 Der er 45 kommentarer og
1 løsning

Opdatere indholdet af en node - xhtml valid

Hej Eksperter!

Jeg sidder og leger med lidt xhtml og fundet ud af at javascript skal skrives anderledes. Fx kan jeg ikke bruge min innerHTML som jeg ellers har været ganske glad for :)

Hvordan opdatere jeg så teksten inde i en div ud fra dens id?

Har forsøgt med "document.getElementById('countdown_sek_' + id).nodeValue = seconds;" men så skriver den at document.get... er ligmed null, og id'et findes.

Håber da det kan lade sig gøre...

På forhånd tak
Avatar billede or.han Nybegynder
08. september 2006 - 17:55 #1
Teksten inde i en node er jo child til noden. Så det er bare: object.childNodes[i]
Avatar billede or.han Nybegynder
08. september 2006 - 17:58 #2
Men for at opdatere teksten inde i en div gøres sådan:

var tekst = document.createTextNode("Her er noget nyt tekst");
var div = document.getElementById("divnavn");
div.appendChild(tekst);

Så nu er 'tekst' indsat i 'div'.
Avatar billede mclemens Nybegynder
08. september 2006 - 18:02 #3
Som or.han siger i 08/09-2006 17:55:15 så prøv med:

document.getElementById('countdown_sek_' + id).firstChild.nodeValue = seconds;
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 18:10 #4
or.han: din anden kommentar er jeg godt klar over, men det skal gerne være opdatering :)

det virker ikke mclemens, den melder en js-fejl uden nogen logik
Avatar billede mclemens Nybegynder
08. september 2006 - 18:10 #5
Læg dog mærke til at div'en så skal have en text child fra starten af f.eks.:
<div id=" ... ">&nbsp;</div> ... ellers skal der først appendes en childNode som kan rettes på ... d.v.s.:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){

  id="test";
  seconds=new Date().getSeconds();

  tn=document.getElementById('countdown_sek_' + id);
  if(tn.childNodes.length<1){
    alert("Ingen firstChild, opretter derfor child element");
    tn2=document.createTextNode(seconds);
    tn.appendChild(tn2);
  }
  else tn.firstChild.nodeValue = seconds;
}

</script>

</head><body>

<div id="countdown_sek_test"></div>
<b onclick="wload();">Test sekunder her</b>

</body></html>
Avatar billede mclemens Nybegynder
08. september 2006 - 18:11 #6
Update, tror det er manglende firstChild ...
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 18:14 #7
Jeg har denne funktion:

function countdown(id,slut) {
    seconds        = Math.round(slut - 1157719363); // her skal indsættes en timestamp-funktion
   
    if (seconds < 0) seconds = 0;

    days        = Math.floor(seconds / (60 * 60 * 24));
    seconds        %= (60 * 60 * 24);
    hours        = Math.floor(seconds / (60 * 60));
    seconds        %= (60 * 60);
    minutes        = Math.floor(seconds / 60);
    seconds        %= 60;
   
    if (days < 10) days = '0' + days;
    if (hours < 10) hours = '0' + hours;
    if (minutes < 10) minutes = '0' + minutes;
    if (seconds < 10) seconds = '0' + seconds;
   
    document.getElementById('countdown_dag_' + id).firstchild.nodeValue = days;
    document.getElementById('countdown_time_' + id).firstChild.nodeValue = hours;
    document.getElementById('countdown_min_' + id).firstChild.nodeValue = minutes;
    document.getElementById('countdown_sek_' + id).firstChild.nodeValue = seconds;
   
    setTimeout('countdown(' + id + ',' + slut + ')',5000);
}

Som gerne skulle opdatere disse felter:
<span id='countdown_dag_1'>??</span>
<span id='countdown_time_1'>??</span>
<span id='countdown_min_1'>??</span>
<span id='countdown_sek_1'>??</span>
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 18:21 #8
Oprettelsen af span'erne ser således ud:
slutter                    = document.createElement('div');
slutter.appendChild(document.createTextNode('Tid tilbage:'));

    tid                    = document.createElement('div');
    tid.setAttribute('id','countdown_' + id);
   
        tid_dag                = document.createElement('span');
        tid_dag.setAttribute('countdown_dag_' + id);
        tid_dag.appendChild(document.createTextNode('?? '));
   
        tid_time            = document.createElement('span');
        tid_time.setAttribute('countdown_time_' + id);
        tid_time.appendChild(document.createTextNode('?? '));
   
        tid_min                = document.createElement('span');
        tid_min.setAttribute('countdown_min_' + id);
        tid_min.appendChild(document.createTextNode('?? '));
   
        tid_sek                = document.createElement('span');
        tid_sek.setAttribute('countdown_sek_' + id);
        tid_sek.appendChild(document.createTextNode('??'));
   
        tid.appendChild(tid_dag);
        tid.appendChild(tid_time);
        tid.appendChild(tid_min);
        tid.appendChild(tid_sek);
       
    slutter.appendChild(tid);
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 18:23 #9
No no no... har vidst glemt 'id', i min setAttribute... det var dog en træls fejl jeg har kæmpet med flere timer nu :S
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 18:25 #10
phps timestamp (time()) og javascripts timestamp (getTime()) er ikke ens? :S
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 18:26 #11
jeg har i øvrigt stadig problemer med mit design... som du kan se bliver siden større end den måde og går ind over menuen til venstre - hvad skyldes det?
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 18:31 #12
hehe jeg snakker hvis for at holde mig vågen :P

timestampsne er ens og min counter virker nu! ganz klasse... smider I begge et par svar? :)

ser os ud til at layoutet er ok igen nu, men lidt underligt den nogengange fu**** op
Avatar billede mclemens Nybegynder
08. september 2006 - 18:47 #13
Ok :)
Avatar billede mclemens Nybegynder
08. september 2006 - 19:47 #14
Tak for point :)

or.han iflg. [ smider I begge et par svar? :) ]
-> http://www.eksperten.dk/spm/731204
Avatar billede mclemens Nybegynder
08. september 2006 - 19:57 #15
elskermad.dk >

<script type="text/javascript">
<![CDATA[
... javascript ...
]]>
</script>

i xhtml ... men da IE ikke understøtter xhtml er det bedre at lægge scripts externs via. src og include dem via src angivelse ... & tegn har en speciel betydning i xml så derfor skal url's skrives som &amp; i links - og det er nok det samme problem du har lige p.t.

(( XML tolkningsfejl: ikke korrekt dannet adresse: http://vinderland.alvision.dk/ linjenummer 177, kolonne 109:        document.getElementById('auktionload').setAttribute('src','/feed/liste.php?fra=' + sidsteauktion + '&antal=' + antal); ))

... Prøv at lægge det eksternt ...

...

...

- Hvis du for sjov validerer med xhtml 1.1 kan du se at den også snubler over event handlers sat direkte i dokumentet - senere når vi kommer til 2.0 (om et par år) skal nok sættes via. det samme som man sætter window onload event'en med (se 08/09-2006 18:10:46 ) ... men til den tid - den hovedpine :o)
Avatar billede mclemens Nybegynder
08. september 2006 - 20:03 #16
Hvis man validerer eksperten ser man det samme med & tegnene der ikke
er defineret som &amp; i det tilfælde dog i urls og ikke i javascript http://validator.w3.org/check?uri=http%3A%2F%2Fwww.eksperten.dk ...
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 20:05 #17
okay forstod heller ikke den fejl der var, dejligt du er så forudsigende ;)

jeg har lagt javascripten over i en ekstern fil i stedet - os nemmere at holde styr på (og vel bedre for loadetider?)

det sidste forstår jeg ikke helt, men kan regne ud at det er min menus hover-funktion du snakker om. For den virker hvert fald ikke i FF.
jeg har forsøgt at lave det i en funktion som ved onload tilføjer onmouseover og onmouseout ved onload for at spare på nogle tegn, men det kunne jeg ikke få til at virke
Avatar billede mclemens Nybegynder
08. september 2006 - 20:07 #18
Og nu vi er ved det (næsten) så er <u> en fy ting i 1.1 derfor bruger jeg
<span class="u">understreget tekst</span>
<span class="bu">fed understreget tekst</span>
<span class="b">fed tekst</span>
<span class="i">italic tekst</span>
... og med font-style / font-weight defineringerne
på css delene i stylesheetet ...
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 20:09 #19
Den kan slet ikke lide min iframe :S
http://validator.w3.org/check?uri=http%3A%2F%2Fvinderland.alvision.dk
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 20:10 #20
bruger ikke <u> særligt tit og har lavet mig en class='fed' i min css-fil :)
Avatar billede mclemens Nybegynder
08. september 2006 - 20:10 #21
[ (og vel bedre for loadetider?) ] Nr. 2 load : helt sikkert...
Nr. 1 load ... uhm et par meget få ms. eller brøkdele af 1ms. da den
skal hente en ekstra fil (header dataer der skal sendes extra) ...

[ det sidste forstår jeg ikke helt, men kan regne ud at det er min menus hover-funktion du snakker om. ] Nej, snakkede ikke om den - jeg så kun at du havde fejl ... Og ville lige nævne lidt fra xhtml 1.1 - da det jo er det xhtml kører over imod ...

... Kigger på det ...
Avatar billede mclemens Nybegynder
08. september 2006 - 20:12 #22
Frameset eller transitional for iframe ...
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 20:12 #23
sætter også meget pris på du gider bruge tid på at lære mig lidt om det :) det er vel fremtiden inden for udvikling - så skal vel følge med!
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 20:12 #24
[Frameset eller transitional for iframe ...]
i stedet for Strict?
Avatar billede mclemens Nybegynder
08. september 2006 - 20:14 #25
xframes kommer nok i 2.0 se http://www.w3.org/TR/xframes/
... Bemærk det er ikke understøttet endnu ...
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 20:14 #26
[[Frameset eller transitional for iframe ...]
i stedet for Strict?]

Jep, det gjorde en forskel :)
Avatar billede mclemens Nybegynder
08. september 2006 - 20:19 #27
Hehe, cross-postning :)

Kaster lige et link hvis or.han er lidt lost m.h.t.
hvad vi snakker om :) http://vinderland.alvision.dk
Avatar billede mclemens Nybegynder
08. september 2006 - 20:25 #28
[ det sidste forstår jeg ikke helt, men kan regne ud at det er min menus hover-funktion du snakker om. ] Kan se det nu - det er baggrunden du tænker på ... da alle menupunkter der får denne hover indeholder et link kan det gøres så du bruger :hover via width og height defineringer på a elementet og så fikser den via det - samtidig virker linket fra venstre side til højre side - og ikke kun på teksten ... strikker lige et lille eksempel sammen ... (skal lige downloade test filer)
Avatar billede mclemens Nybegynder
08. september 2006 - 20:30 #29
.menu_venstre_indhold slettes og:



a.menu {
    color:                #000000;
    text-decoration:    none;
    font-weight:        normal;

    height:                21px;
    background-image:    url(/_grafik/layout/menu_venstre_indhold.png);
    background-image:    url(./menu_venstre_indhold.png);
    background-repeat:    no-repeat;
    text-align:            left;
    line-height:        20px;
    padding:            0px 0px 0px 8px;
    overflow:            hidden;
display:block;
}



a.menu:hover {
    color:                #FF0000;
    text-decoration:    none;
    font-weight:        normal;
    background-image:    url(/_grafik/layout/menu_venstre_indhold_hover.png);
}


og


<DIV class=menu_venstre_indhold
onmouseover='this.style.backgroundImage="url(/_grafik/layout/menu_venstre_indhold_hover.png)"'
            onclick='location.href="/profil.htm"'
            onmouseout='this.style.backgroundImage="url(/_grafik/layout/menu_venstre_indhold.png)"'>»&nbsp;
            <A class=menu href="http://vinderland.alvision.dk/profil.htm">Om
            Vinderland</A></DIV>

rettes til:


<a class="menu" href="http://vinderland.alvision.dk/profil.htm">Om Vinderland</a>
Avatar billede mclemens Nybegynder
08. september 2006 - 20:30 #30
;)
Avatar billede mclemens Nybegynder
08. september 2006 - 20:31 #31
Hmm, jeg burde have taget en it uddannelse :/
Avatar billede mclemens Nybegynder
08. september 2006 - 20:32 #32
Ups slet lige:
    background-image:    url(./menu_venstre_indhold.png);
... det var fra min egen test fil ...
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 20:46 #33
Det virker perfekt :)

Ja det burde du helt sikkert ha' gjort - troede jeg egentlig du havde :o)
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 20:53 #34
Hvordan tømmer jeg nemmest hele listen? altså hele div'en med id'et 'auktioner' ?
Avatar billede mclemens Nybegynder
08. september 2006 - 20:57 #35
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function emptelm(tn){
  tn=document.getElementById(tn);
  for(i=0,i2=tn.childNodes.length;i<i2;i++)tn.removeChild(tn.firstChild);
}

</script>

</head><body>

<b onclick="emptelm('auktioner');">Tøm auktioner</b>

<div id="auktioner"><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div></div>

</body></html>
Avatar billede mclemens Nybegynder
08. september 2006 - 21:01 #36
Kommer lige med en anden også om lidt
Avatar billede mclemens Nybegynder
08. september 2006 - 21:03 #37
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function resetauk(tn){
  tn2=document.getElementById("auktioner");
 
  tn=document.createElement("div");
  tn.setAttribute("id","auktioner");

  tn2.parentNode.replaceChild(tn,tn2);
 
}

</script>

</head><body>

<b onclick="resetauk();">Reset auktioner</b>

<div id="auktioner"><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div><div>asdasdhi</div></div>

</body></html>
Avatar billede mclemens Nybegynder
08. september 2006 - 21:06 #38
Den ene fjerner alle elementer i div'en en for en - den anden erstatter
hele elementet med et nyt element ... tror den sidste er  den bedste ...
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 21:07 #39
Den sidste er vel bedst?
Avatar billede mclemens Nybegynder
08. september 2006 - 21:09 #40
Jah, medmindre der kun er et element eller to i auktioner - f.eks. to små tekststrenge der bare skal fjernes ... ellers så må en nyoprettelse og erstatning er det hurtigste :o)
Avatar billede olebole Juniormester
11. september 2006 - 13:31 #41
<ole>

PS: Desværre er object-elementet desværre elendigt implementeret i dagens browsere. Ellers ville dette element med fordel kunne anvendes i stedet for en iframe under XHTML  :)

/mvh
</bole>
Avatar billede elskermad.dk Nybegynder
11. september 2006 - 14:55 #42
vil du uddybe det lidt olebole? :)
Avatar billede olebole Juniormester
11. september 2006 - 15:34 #43
Du burde kunne bruge:
    <object id="foo" type="text/html" data="minSide.html" style="width:400px;height:300px"></object>

- og:
    document.getElementById("foo").setAttribute("data", "minAndenSide.html");

- men det kan man desværre ikke 'bare'. Både IE, FF og Opera har seriøse fejl i implementeringen af object-elementet  :o|
Avatar billede elskermad.dk Nybegynder
11. september 2006 - 16:08 #44
okay lyder spændende, men hvad er forskellen/fordelen ved at bruge et sådan object frem for en iframe?
Avatar billede olebole Juniormester
12. september 2006 - 09:02 #45
I denne forbindelse er fordelen, at object-elementet er validt under XHTML - men det funker som sagt ikke ordentligt i dagens brusere  :)
Avatar billede elskermad.dk Nybegynder
12. september 2006 - 09:43 #46
iframen bliver da ellers ikke fejlet når man validerer siden hos w3.org? men iframe er ikke valid?
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:04 Canon printer vil ikke udskrive farver Af mort1 i Printere
I går 14:50 Hvilket fabrikat af Mesh systemer virker? Af fkj i Wifi
15/0513:45 AJAX kode -javascript Af Asky i Programmeringsværktøjer
15/0511:50 Vælg indstilling - blå skærm med med flere muligheder for fejlretning Af Uvanga i Windows
14/0523:24 Google sheets beregning udfra dato Af rickiegrayholm i Office & Kontorpakker
White papers
Flere white papers »