Oprettet tor. d. 25. februar 2010 kl. 22:50:31

kjeldsted
kjeldsted (9.619 point. Point ude: 210)
www.jenskjeldsted.dk

Problem med document.getElementById()

Hej derude.

Jeg har nu siddet i noget tid og stirret godt og grundigt på den efterfølgende kode. Det giver slet ikke mening for mig hvorfor pokker det ikke virker som det skal, så håber der er en der kan fortælle hvad jeg gør galt.

Koden der er tale om er som følger:

function firstMove()
{
    moveDiv(firstDiv);
    // setTimeout("moveDiv('" + firstDiv + "')",elementHeight*scrollSpeed+stopTime)
}

function move(elementId,top)
{
    newTop = elementHeight - top;
    document.getElementById(elementId).style.top = newTop + "px";
}

function moveDiv(elementId)
{
    var oldTop = document.getElementById(elementId).style.top;
    var i = 1;
    while(i<=elementHeight)
    {
        setTimeout("move('" + elementId + "'," + i + ")",scrollSpeed*i);
        i++;
    }
   
}
//load_rss(rssURL,"rssContent_0");
firstMove();

I Firefox's fejlkonsol får jeg fejlen:

Fejl: document.getElementById(elementId) is null
Kildefil: http://jenskjeldsted.dk/ (...)
Linje: 61

(Linje 61 er: var oldTop = document.getElementById(elementId).style.top;)

Men senere i koden finder vi linjen (document.getElementById(elementId).style.top = newTop + "px";) som ikke skaber problemer. Men begge linjer henter begge document.getElementById(elementId) hvor elementId er den samme værdi i begge linjer (har jeg tjekket, dobbelt tjekket og tribel tjekket).

Hvordan kan den hente informationen når den kører den sidste del men ikke den første?

Skrevet tor. d. 25. februar 2010 kl. 23:04:24| #1

splazz
splazz (55.963 point)
majbom.com
hvor kommer firstDiv fra i funktionen firstMove?

Skrevet tor. d. 25. februar 2010 kl. 23:09:27| #2

Sorry. Glemte lige toppen af koden, men hér er den så (der står nogle variabler der ikke bliver brugt, men bare glemt alt om det).

///////////////---------------SETTINGS FOR RSS Reader v. 0.1---------------///////////////

var numShownItems = 10;                       
var rssURL = "http://jenskjeldsted.dk/ (...)
var lineSeperator = "NEWLINE";
var scrollSpeed = 5;
//var scrollAcc = 20;
var stopTime = 50;
var elementHeight = 240;

var firstDiv = "rssContent_0";
var secondDiv = "rssContent_1";

var messages = new Array();
messages[0] = "Kunne ikke loade nyheder";
messages[1] = "Loader...";

///////////////------------------------------------------------------------///////////////

Skrevet tor. d. 25. februar 2010 kl. 23:56:46| #3

kimsey0
kimsey0 (23.194 point)
jacobbundgaard.dk
Ændr linjen:

var oldTop = document.getElementById(elementId).style.top;

til:

var oldTop = document.getElementById(elementId);

Så funker det :)

Skrevet tor. d. 25. februar 2010 kl. 23:59:09| #4

kimsey0
kimsey0 (23.194 point)
jacobbundgaard.dk
Desuden, brug et Javascript-framework og gør det hele meget lettere for dig selv:
http://jquery.com/
http://mootools.net/
http://script.aculo.us/

Skrevet fre. d. 26. februar 2010 kl. 00:01:39| #5

Ja, nu har jeg så en variabel med værdien null.

Men det jeg ville have er værdien for style.top. Hvis jeg blot ønskede en variaben med null havde jeg bare skrevet

var newTop = null;

;)

Skrevet fre. d. 26. februar 2010 kl. 00:29:13| #6

kimsey0
kimsey0 (23.194 point)
jacobbundgaard.dk
Jamen, du bruger jo slet ikke oldtop til noget.
Uden den er der ikke nogle problemer.

Skrevet fre. d. 26. februar 2010 kl. 21:13:27| #7

Du har ikke overvejet jeg evt. ville bruge den til noget, senere?

Selvfølgelig skal jeg bruge den til noget. Jeg ville bare ikke begynde at skrive en helveds masse kode uden at vide om det virker fordi jeg i starten har en variabel der er lig null som gerne skulle være et tal!

Skrevet fre. d. 26. februar 2010 kl. 22:03:50| #8

kimsey0
kimsey0 (23.194 point)
jacobbundgaard.dk
Det er nok fordi DOM'en ikke er loaded færdig.
Læg scriptet nederst i din body eller brug en event-handler ved onload eller DOMContentLoaded.

Skrevet fre. d. 26. februar 2010 kl. 22:35:09| #9

Så langt så godt. Nu skriver den sjovt nok bare undefined lige meget hvilken CSS værdi jeg prøver at trække ud af den. Hvis jeg skriver

var oldTop = document.getElementById(elementId).style;
for(i in oldTop)
{
    document.write(i + ": " + oldTop.i + '<br>');
}

Lister den ganskevist alt hvad en CSS kan indeholde men skriver undefined ud fra samtlige punkter. Og har da ellers følgende kode liggende i mit head tag:

<style type="text/css">
#rssContent_0 {
    width:240px;
    height:240px;
    position:relative;
    top:240px;
    background-color:#F00;
}

#rssContent_1 {
    width:240px;
    height:240px;
    position:relative;
    top:0px;
    background-color:#0F0;
}
</style>

Nogle bud, på hvad dette så skyldes

Skrevet søn. d. 28. februar 2010 kl. 18:59:40| #10

kimsey0
kimsey0 (23.194 point)
jacobbundgaard.dk
Hmm... Jeg tror jeg bliver nød til at bruge lidt engelsk for at forklare det. Gid jeg kendte til nogle oversættelser af termer indenfor OOP.

Dette skyldes at Javascripts object datafield parsing kommer før dets variable parsing. På linjen:

document.write(i + ": " + oldTop.i + '<br>');

bliver i'et aldrig parset, men i stedet får du talrige gange den samme ikkeeksisterende "oldtop.i"-variabel at se. Du kan afprøve det med dette stykke kode:

var oldTop = document.getElementById(elementId).style;
for(top in oldTop)
{
    document.write(top + ": " + oldTop.top + '<br>');
}


Her vil du gentagne gange få det samme "0px" at se. I praksis burde det dog fungere glimrende, hvis bare du bruger konstanter eller strenge i stedet for variabler i din tilgang til objektets stilegenskaber.

Skrevet søn. d. 28. februar 2010 kl. 19:43:16| #11

Øh. Jeg kan nu umiddelbart ikke se anden forskel end at 'i' er byttet ud med 'top'?

Og jeg forstår stadig ikke hvorfor document.getElementById(elementId).style.top udskriver ingen ting.

Skrevet søn. d. 28. februar 2010 kl. 20:00:56| #12

kimsey0
kimsey0 (23.194 point)
jacobbundgaard.dk
Hvis du nu fulgte mit råd og lagde dit funktionskald i en event-handler på onload, så ville din alert ikke give en tom streng, men "0px".

Skrevet søn. d. 28. februar 2010 kl. 20:10:18| #13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ (...)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>RSS reader - Alpha version 0.1</title>
<style type="text/css">
#rssContent_0 {
    width:240px;
    height:240px;
    position:relative;
    top:240px;
    background-color:#F00;
}

#rssContent_1 {
    width:240px;
    height:240px;
    position:relative;
    top:0px;
    background-color:#0F0;
}
</style>
<script type="text/javascript">
///////////////---------------SETTINGS FOR RSS Reader v. 0.1---------------///////////////

var numShownItems = 10;                                     // Antal elementer til visning. Sættes til 'ALL' (tegnene ' SKAL være med ved 'ALL')
var rssURL = "http://jenskjeldsted.dk/ (...)     // URL hvor rss feedet bliver udskrevet til tekst (SKAL indeholde "http://")
var lineSeperator = "NEWLINE";                                // Skilletegn mellem nyheder i udskrevet rss feed
var scrollSpeed = 5;                                        // Slut hastigheden på scrollen. (Jo højere jo langsommere)
//var scrollAcc = 20;                                        // Hastighed/længde på accelration.
var stopTime = 50;                                            // Tid script stopper ved færdig scroll angivet i millisekunder.
var elementHeight = 240;                                    // Højde på scroller i px.

var firstDiv = "rssContent_0";
var secondDiv = "rssContent_1";

var messages = new Array();
messages[0] = "Kunne ikke loade nyheder";
messages[1] = "Loader...";

///////////////------------------------------------------------------------///////////////
function loop_move()
{
   
}

function firstMove()
{
    moveDiv(firstDiv);
    // setTimeout("moveDiv('" + firstDiv + "')",elementHeight*scrollSpeed+stopTime)
}

function move(elementId,top)
{
    newTop = elementHeight - top;
    document.getElementById(elementId).style.top = newTop + "px";
}

function moveDiv(elementId)
{
    var oldTop = document.getElementById(elementId).style.top;
    for(i in oldTop)
    {
        document.write(i + ": " + oldTop + '<br>');
    }
    alert(oldTop);
    var i = 1;
    while(i<=elementHeight)
    {
        setTimeout("move('" + elementId + "'," + i + ")",scrollSpeed*i);
        i++;
    }
   
}
//load_rss(rssURL,"rssContent_0");
//if(document.readyState=="loaded"||document.readyState=="complete") firstMove();
//Old functions
/*


*/
</script>
</head>

<body onLoad="firstMove()">
<div style="overflow:hidden; height:240px; width:240px; border:1px solid;" id="rssReader"><div id="rssContent_0">TEST0</div><div id="rssContent_1">TEST1</div></div>
<form name="hidden"><input type="hidden" value="1" name="currNewsId" id="currNewsId"></form>
</body>
</html>

Giver mig en tom alertbox.

Skrevet lør. d. 06. marts 2010 kl. 23:45:29| #14

Lukker bare den hér. Få vist aldrig svar på spørgsmålet.

Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   

   

Seneste spørgsmål

Tabindex!

Oprettet den 11. februar 2012 kl. 11.37
thomasfricke giver 30 point for svar | Giv et svar »

skal frem brugernavn ned og sige om den har eller ej

Oprettet den 11. februar 2012 kl. 02.44
tobrukDk giver 20 point for svar | Giv et svar »

Muligvis script-konfllikt i jquery. Min slider vises...

Oprettet den 9. februar 2012 kl. 23.00
Peterjakobsen giver 30 point for svar | Giv et svar »

Seneste guides

Installer win 7
Den gode bruger


   




Tips & Tricks fra PC World

Teaser billede

Her er fem sjove danske websider du skal kende

Trænger dine lattermuskler til en omgang fitness på dansk? Vi viser vej til fem websider fyldt med humor og vanvittig satire.


Anmeldelser fra PC World

Teaser billede

Test: Denne super-tablet er iPads hårdeste konkurrent

Eee Pad Transformer Prime er frygtindgydende med sin quadcore processor og evne til at trylle sig om til bærbar. Apple bør kigge i bagspejlet, for Asus' tablet-pc kommer buldrende - og gør det...


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Nu kan du snart hente Windows 8

Den nye offentlige betaversion af Windows 8 er klar i denne måned.


Nyheder fra Computerworld

Teaser billede

Måske snart slut med Androids helt store problem

Android-platformen har længe været plaget af et særligt problem. Men måske er problemet nu ved at være elimineret.


Kurser
Samarbejdspartnere

Udgiver · © 2012 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger