Avatar billede apo Praktikant
19. august 2005 - 18:48 Der er 30 kommentarer og
1 løsning

Kompliceret skift af baggrundsfarve, i bestemt <td> Del 2

Hej :-)

Dette spørgsmål er en fortsættelse af: http://www.eksperten.dk/spm/637947

Spørgsmålet her er, hvordan jeg ændrer det nuværende script til, at bevare baggrundsfarven, indtil der klikkes på et nyt spørgsmål i FAQ'en? - Herefter skal det nye spørgsmål 'highlites' indtil der klikkes på et andet spørgsmål... osv.

Det nuværende script kan ses her:

<script type="text/javascript">
var hiLight = "#E4D8CA";

function setFarve(id){
    var elm = document.getElementById(id);
    elm.style.backgroundColor = hiLight;
    setTimeout(function(){elm.style.backgroundColor=""}, 10000);
}
</script>

Apo
Avatar billede roenving Novice
19. august 2005 - 19:20 #1
F.eks.

<script type="text/javascript">
var hiLight = "#E4D8CA";
var oldElm;
function setFarve(id){
    var elm = document.getElementById(id);
    elm.style.backgroundColor = hiLight;
    if(oldElm)oldElm.style.backgroundColor="";
    oldElm = elm;
}
</script>
Avatar billede apo Praktikant
19. august 2005 - 19:29 #2
Det virker jo, smid et svar :-)

Det ser ikke så kompliceret ud, som jeg havde frygtet at scriptet ville blive. Kan du give en kort forklaring af sciptet, så jeg måske kan lære lidt af det?

Så vidt jeg kan se, er det linjerne:
if(oldElm)oldElm.style.backgroundColor="";
    oldElm = elm;

der gør forskellen, men jeg kan ikke lige gennemskue hvad linjerne egentlig betyder...
Avatar billede roenving Novice
19. august 2005 - 19:36 #3
Fidusen er at vi definerer en variabel til at indeholde den sidst satte highlight, oldElm ...

Variablen oldElm får så først tildelt en værdi, når der overhovedet er lavet en highlight, men først efter at vi har checket, at en evt. gammel udgave har fået fjernet highlighten !-)

Velbekomme '-)
Avatar billede olebole Juniormester
19. august 2005 - 19:40 #4
<ole>

- det kan da ikke passe, der er et spm, jeg ikke skal kommentere - eller brokke mig over  ;D

Jeg prøver osse lige her ... mon ikke denne rækkefølge er bedre:
function setFarve(id){
    var elm = document.getElementById(id);
    if(oldElm)oldElm.style.backgroundColor="";
    elm.style.backgroundColor = hiLight;
    oldElm = elm;
}

- mere, hvis elm og oldElm nu skulle være det samme element  :)

/mvh
</bole>
Avatar billede apo Praktikant
19. august 2005 - 19:43 #5
roenving > Uha, et helt nyt sprog, jeg skal forholde mig til :-D

Jeg forsøgte at analysere scriptet i ord, sammenholdt med din forklaring, men blev godt og grundigt rundtosset *LOL*

Det skal jeg nok lige bruge noget tid på at gruble over, inden det falder på plads...
Avatar billede roenving Novice
19. august 2005 - 19:46 #6
Jamen, hvis der er mere, du gerne vil have en forklaring på, så spørg !-)

-- iøvrigt er oles kommentar helt relevant, så den rækkefølge kan du ligesågodt ændre !-)

-- og tak for point ;~}
Avatar billede apo Praktikant
19. august 2005 - 19:46 #7
olebole > Jeg undrede mig også over at du ikke gav lyd fra dig ;-)
Avatar billede apo Praktikant
19. august 2005 - 19:50 #8
roenving > Velbekomme, og tak for hjælpen :-)

Jeg arbejder lige på et spørgsmål...
Avatar billede olebole Juniormester
19. august 2005 - 19:51 #9
Måske disse kommentarer hjælper dig lidt:

<script type="text/javascript">
var hiLight = "#E4D8CA";
var oldElm; // oldElm er ikke defineret

function setFarve(id){
    var elm = document.getElementById(id); // Find element
    if (oldElm) oldElm.style.backgroundColor="";  // Har vi sat en oldElm, så fjern dens bg-farve
    elm.style.backgroundColor = hiLight; // Farv elementet, der er klikket på
    oldElm = elm; // Læg elementet, vi lige har skifetet farve på i variablen oldElm
}
</script>

Da oldElm ikke er defineret fra start, spørger vi med if-sætningen, om den 'ligger noget i den'.
Gør der det, må det være en reference til det sidste element, brugeren har klikket på ... og så skal det element jo have sin farve fjernet.

Derefter kan vi farve det element, brugeren denne gang klikkede på - og gemme det i oldElm-variablen. Så kan vi igen fjerne farven, når brugeren klikker på et element.

Håber, det hjalp lidt  :)
Avatar billede apo Praktikant
19. august 2005 - 20:00 #10
Aha!

Denne forklaring havde jeg ikke selv haft held med at finde frem til:
oldElm = elm; // Læg elementet, vi lige har skifetet farve på i variablen oldElm

Altså... (Hvis jeg har rigtig fat i det)

Vi starter med at finde elementet (id):
var elm = document.getElementById(id);

Dernæst undersøger vi om oldElm eksisterer; Hvis, så sættes den til ""
    if (oldElm) oldElm.style.backgroundColor="";

Og hvis oldElm er "", og hvis et element 'aktiveres', så farves baggrunden:
    elm.style.backgroundColor = hiLight;

... og oldElm indeholder nu id'et på elementet (Og oldElm eksisterer igen)
    oldElm = elm; // Læg elementet, vi lige har skifetet farve på i variablen oldElm

Næste gang der klikkes på et link, køres rutinen endnu engang:

"Dernæst undersøger vi om oldElm eksisterer; Hvis, så sættes den til "" "
    if (oldElm) oldElm.style.backgroundColor="";

Jeg tror at jeg har lidt mere forståelse for det nu, selv om jeg stadig famler lidt i det :-)
Avatar billede apo Praktikant
19. august 2005 - 20:10 #11
Eller har jeg?

Jeg er vant til at forholde mig til ASP/Visual Basic, så det er nok derfor, jeg bliver lidt rundtosset når jeg ser på javascripts. Fremgangsmetoderne er forskellige.
Avatar billede olebole Juniormester
19. august 2005 - 20:12 #12
Efter min sdavøfajls inficerede kommentar, er det måske lidt pudsigt, jeg vil rette noget sprogligt i din - men det er af forståelses hensyn  ;o)

Vi starter med at finde elementet (id):
var elm = document.getElementById(id);

Dernæst undersøger vi om oldElm eksisterer; Hvis, så sættes dets farve til ""
    if (oldElm) oldElm.style.backgroundColor="";

Når et element 'aktiveres', så farves baggrunden:
    elm.style.backgroundColor = hiLight;

... vi ændrer oldElm. Vi lægger en reference til selve elementet i oldElm
    oldElm = elm; // Læg elementet, vi lige har skifetet farve på i variablen oldElm

Næste gang der klikkes på et link, køres rutinen endnu engang

----------------------

- og så sætter jeg lige et par klammer ind, der præciserer if-sætningen lidt:

<script type="text/javascript">
var hiLight = "#E4D8CA";
var oldElm; // oldElm er ikke defineret

function setFarve(id){
    var elm = document.getElementById(id); // Find element
    if (oldElm) {
        oldElm.style.backgroundColor="";  // Har vi sat en oldElm, så fjern dens bg-farve
    }
    elm.style.backgroundColor = hiLight; // Farv elementet, der er klikket på
    oldElm = elm; // Læg elementet, vi lige har skifetet farve på i variablen oldElm
}
</script>
Avatar billede olebole Juniormester
19. august 2005 - 20:14 #13
- og egentlig kan jeg bedre lide denne vending (men det er nok fluesex):

Dernæst undersøger vi, om vi har lagt et element i oldElm. Hvis, så sættes dets farve til ""
    if (oldElm) oldElm.style.backgroundColor="";
Avatar billede apo Praktikant
19. august 2005 - 20:21 #14
Det er fordi jeg skriver kommentarerne, som jeg selv bedst kan forholde mig til dem ;-)

Jeg tror at jeg er ved at være med (Selv om, jeg har svært ved at sætte præcise ord på det). Dine sidste forklaringer i scriptet, beskriver processen så den er til at forstå.

Men jeg skal stadig bruge noget tid på at omstille mig til javascript, men det kommer lidt efter lidt :-)
Avatar billede olebole Juniormester
19. august 2005 - 20:25 #15
Ja, det er klart. Et sprog toner somregel langsom frem af en tåge (- og ikke kun på den lokale bodega *LoL*)  ;o)

En sidste, lille forklaring:
I JS kan du lægge en direkte reference til et element i en variabel:

var elm, oldElm,
elm = document.getElementById("mitDiv");
oldElm = elm;
elm = document.getElementById("mitAndetDiv");

Først finder vi div'et 'mitDiv' og lægger en reference til det i 'elm'.
Dernæst lægger vi endnu en reference til div'et i 'oldElm'.

Selvom vi efterfølgende ændrer 'elm', så den nu indholder en reference til et nyt div - ja, så ligger der i 'oldElm' _stadig_ en reference til 'mitDiv'  :)
Avatar billede roenving Novice
19. august 2005 - 20:28 #16
Forståsomt nok er der en del omstilling fra vbscript til javascript ...

-- men ole, det kan du jo også i vb(script) !-)

-- ved funktionskald er der jo så bare en opmærksomhed på, om man overfører værdier ByVal eller ByRef ?-)
Avatar billede apo Praktikant
19. august 2005 - 20:30 #17
Så det vil sige at i modsætning til ASP, hvor en variabel (et element) kun kan indeholde en værdi, kan en variabel/et element i JS altså indeholde flere. Er det korrekt?

Jeg mangler i hvert fald noget forståelse for, hvad tingene kaldes. Jeg kager rundt i betegnelserne for variabler, elementer osv., da jeg aldrig har fået lært hvad de forskellige ting hedder. Kan du give mig en kort forklaring på det?
Avatar billede apo Praktikant
19. august 2005 - 20:32 #18
olebole > Jeg synes at du har fortjent nogle points for dine uddybende forklaringer. Giv mig lige et tegn, så opretter jeg et spørgsmål med nogle points til dig :-)
Avatar billede apo Praktikant
19. august 2005 - 20:36 #19
roenving > ById har jeg gennemskuet. Men hvad er ByVal og ByRef?
Avatar billede olebole Juniormester
19. august 2005 - 20:38 #20
ByRef og ByVal er de to måder, du kan medsende variabler som argumenter i VB. ByReference og ByValue  ;D

En variabel kan indeholde mange forskellige ting - men én ting ad gangen. Til gengæld er en variabel ikke type-casted fra fødslen i JS.

En anden ting, du vil komme til at elske: Funktioner kan returnere alle variabel-typer ... også arrays og objekter. Du behøver ikke som i VB sende et (tomt) array med til en funktion, ByRef - og ændre/fylde det der. Det er rart  :)

Ellers tak, apo. Jeg blandede mig ikke for at få points, men for at hjælpe
Avatar billede olebole Juniormester
19. august 2005 - 20:40 #21
- eller var det bare for at blande mig?  :D
Avatar billede roenving Novice
19. august 2005 - 20:41 #22
VB-ting, hvor du i en funktion kan definere om du vil rode med den originale variabel eller en kopi ...

-- den største forskel, når vi snakker variabler i javascript og VB er nok, at en variabel i javascript altid pr. definition er et objekt (også selv om den indeholder en simpel værdi, som f.eks. et tal), hvor du i VB behandler variabler vidt forskelligt, hvis de indeholder simple værdier i modsætning til objekter ...

-- desuden er javascript ligeglad med, om en variabel indeholder det ene eller det andet, og du kan sagtens i fire linjer i træk transformere en tekstvariabel til et html-element, til html-elementets tekst-indhold og til sidst til et array af tekst, fordi du har splittet teksten !-)
Avatar billede apo Praktikant
19. august 2005 - 21:15 #23
olebole > Jeg ved godt at du ikke blandede dig for at få points, men jeg synes alligevel at pointene ville være fortjent (Giv mig besked hvis du alligevel vil have dem) :-)

Til jer begge:
Jeg kan se på det hele, at jeg skal have taget fat på de helt grundlæggende begreber (Variabler, objekter osv.). De er jo vigtige for forståelsen, ikke mindst når jeg skal gøre mig selv forståelig over for andre, eller når jeg skal forstå hvad andre skriver til mig.

Jeg er jo sådan set blot sprunget ind i midten af det hele, da jeg kastede mig over mit webprojekt, og mangler faktisk at få styr på de grundlæggende betegnelser, begreber og principper. Det må være mit næste mål...

Tak for hjælpen og forklaringerne til jer begge :-)

Apo
Avatar billede olebole Juniormester
19. august 2005 - 23:12 #24
apo >> det er helt fint - jeg mener det. Jeg hjælper i virkeligheden ikke for points - og når folk måske ser mig tænde af i nogle spørgsmål, er det fordi, jeg synes, det er så primitivt bare at lade, somom ingen har sagt noget til én. En lille tak må altid være på sin plads, når andre gider kere sig om ens problemer ... og det har du jo så rigeligt overøst mig med  ;o)

Desværre ligger Netscape's JavaScript-reference vist ikke på WWW længere. Heldigvis nåede jeg at få fat i et par PDF'er, mens den endnu var tilgængelig - men i mangel af bedre, kan du kikke lidt i JScript-referencen (JScript er MS' implementering af ECMA-standarden, som både JavaScript og JScript bygger på):
    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jslrfJScriptLanguageReference.asp

Der er også en User's Guide i menuen til venstre. Prøv at kikke lidt rundt  :)
Avatar billede olebole Juniormester
19. august 2005 - 23:17 #25
- og så finder jeg dig i øvrigt 'pisse-irriterende-nysgerrig', hvilket er en kolossal kompliment!  ;D
Du er interessant at hjælpe, fordi du helt tydeligt er ude på 'den helt store undersøger' for tiden. Så giver det jo for alvor mening at hjælpe  :)
Avatar billede olebole Juniormester
20. august 2005 - 00:33 #26
PS: Jeg har i disse dage ikke et sted at uppe - men der kommer et lille site op i næste uge (foreløbigt bare med et par artikler og nogle kodestumper). Der kunne jeg passende lægge de omtalte pdf'er til download - så'rn lidt 'i skyggen', da de jo er Netscape's copyright - men hvis du har en e-mail-adresse, vil jeg gerne sende dem til dig. Der er en reference og en User's Guide for JavaScript 1.4 og 1.5  :)
Avatar billede apo Praktikant
20. august 2005 - 00:46 #27
Det kender jeg godt. Jeg bliver også selv irriteret når nogle opretter et spørgsmål, og jeg og andre bruger noget tid på at hjælpe, hvorefter spørgsmålet lukkes uden en lyd eller personen glemmer alt om, at han/hun har oprettet det :-/

Pointræset er da meget sjovt, men den virkelige belønning er vel, at se hvor glade nogle bliver, når de har fået hjælp til et problem, de måske har fumlet med i timer eller dage.

Jeg er selv rigtig glad for den hjælp jeg får herinde fra dig og andre, hvilken jeg lærer meget af, så selvfølgelig siger pænt tak for hjælpen - Sætter man pris på andres hjælp, er det sq det mindste man kan gøre.

'Pisse-irriterende-nysgerrig' - Hehe. Det er jeg da glad for at høre :-D Jeps, jeg er på opdagelsesrejse for tiden, og lærer noget nyt hver gang, jeg sidder foran skærmen. Det begyndte med en idé om et website lavet med FrontPage, og har siden da udviklet sig til læren om (korrekt) HTML, CSS, crossbrowser-funktionalitet, SEO og en masse andet - Strømmen af viden vil ingen ende tage, og jeg suger til mig :-)

Jeg har lært at man sagtens kan spytte nogle sider ud i FrontPage, smække dem på nettet og kalde det et website. MEN... Hvis man vil lave noget ordenligt, noget som fungerer optimalt i alle browsere, og noget som man selv bliver tilfreds med, er man nødt til at sætte sig ind i en masse ting, undervejs i forløbet; Og jeg er sikkert kun lige begyndt at lære :-)

Jeg må se nærmere på JScript-referencen, på et tidspunkt (Når jeg måske kaster mig over javascript). I første omgang skal jeg lige have lært noget mere om HTML og CSS; Der er sikkert 'nogle' huller der mangler at blive udfyldt ;-)
Avatar billede apo Praktikant
20. august 2005 - 00:51 #28
Ja, jeg læste i din 'artikel' (Som du havde opgivet at lægge ud her på E), at du har planer om et site med lidt 'alt godt fra oleboles vidensbank'. Det tror jeg at vi er mange der ser frem imod - Også selv om det måske ikke bliver et kæmpesite :-)

Du må meget gerne sende mig PDF'erne på adressen: jne76 [ a t ] jubii.dk - Så kan jeg se om jeg kan få noget ud af dem :-)
Avatar billede apo Praktikant
20. august 2005 - 01:39 #29
*ROFL* Jeg tog lige et kig på nogle af de sider, jeg lavede i FP for lidt over et halvt år siden, og sammenlignede så med de sider (og den HTML), jeg er nået frem til at have i dag ved selv at kode HTML'en... Damn en forskel der var på de gamle og de nye sider!

Det var helt uhyggeligt at se den ene slagmark af skod-HTML konkurrere med den anden, om at se grimmest ud *GG*

Jeg tror sq at jeg gemmer et par af siderne, til hvis jeg en dag vil lave et museum for 'bad-taste-HTML', hehe.

Dagens første griner!
Avatar billede olebole Juniormester
20. august 2005 - 03:15 #30
- watch out ... det kan være en skræmmende oplevelse! Lidt, som at åbne en mummificeret ble  =8-O
Avatar billede olebole Juniormester
20. august 2005 - 03:16 #31
... tænk, at det så sådan ud dengang!  ;D
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