[Javascript] beginners vraag

[Verwijderd]

Hallo mede tweakeraars,

Ik ben net begonnen met scripten en ik loop bij het simpelste script nu al tegen een probleem aan . Ik de volgende functie:

JavaScript:

function pointSwitch(pointid){
if (document.getElementById(pointid).src == '"style/point.png"'){
document.getElementById(pointid).src = '"style/point2.png"';
} else {
document.getElementById(pointid).src = '"style/point.png"';
}
} 

en de volgend html:

HTML:

<img id="point1" src="style/point.png" border="0" style="float: left;margin-top: 3px;margin-right: 2px;" />

<a href="javascript:pointSwitch('point1')">klik</a>

Het doel is dat het plaatje van verandert wanneer erop wordt geklikt, dus bij de eerste klik wordt het 'point2.png', en bij de tweede klik wordt het weer het begin plaatje, 'point.png'. Het probleem is als volgt: Als ik klik op de link verdwijnt het hele plaatje juist. Kan iemand mij helpen om de code goed te krijgen zodat het pad naar het tweede plaatje wel klopt?

Alvast bedankt.

[ Voor 6% gewijzigd door Verwijderd op 21-02-2009 11:01 ]

[Osiris]

Waarom heb je tweemaal quotes in je javascript staan? Dus '"path/naar/image"' ipv gewoon "path/naar/image".

Geen idee of dat het oplost, maar volgens mij is 't wel compleet useless.

[Verwijderd]

Bedankt voor de tip, maar als ik dat doe gebeurt er niks omdat de functie "style/point.png" niet gelijk beschouwt als "style/point.png" in de img-tag. Het plaatje blijft gewoon staan als ik er op klik en verandert niet.

[Spockz]

Kijk eens of je functie sowieso wordt uitgevoerd. Doormiddel van bijv. Firebug voor Firefox of door het plaatsen van een alert() in je functie.

Als je vervolgens Firebug geïnstalleerd hebt kun je je JS code ook debuggen.

[cossy nl]

voorbeeldje:

http://www.codebelly.com/javascript/backimagechange.html
Hier doen ze de achtergrond, met een mouse click

En nog eentje:

http://www.codeave.com/JavaScript/code.asp?u_log=7001
Hier verdanderen ze een pkaatje door op een link te klikken.

[ Voor 36% gewijzigd door cossy nl op 21-02-2009 11:18 ]

[Osiris]

Als ik hier lokaal dat stukje code neerplemp en vervolgens de document.getElementById(pointid).src in een alert() smijt, dan krijg ik de volledige path te zien?

En als ik het 2e plaatje in de else smijt (want die check komt ie dus niet 'door' omdat hij de path volledig ziet en je checkt voor alleen de filename), dan verandert het plaatje probleemloos.

[ Voor 37% gewijzigd door Osiris op 21-02-2009 11:20 ]

[cossy nl]

je zou inderdaad wat terug moeten krijgen ja. Kijk eens wat je terug krijgt en zet het hier maar neer.

[Elvis]

Zou het niet gemakkelijker zijn om de naam van het plaatje in een variable op te slaan ipv eerst altijd te moeten kijken in je HTML welk plaatje er op dit moment staat?

JavaScript:

var plaatje = "point.png";

function pointSwitch(pointId) {
    if(plaatje == "point.png") {
        plaatje = "point2.png";
    }
    else {
        plaatje = "point.png";
    }
    document.getElementById(pointId).src = "style/"+plaatje;
}

Disclaimer: Elvis is niet zeker dat deze code 100% correct is. Elvis heeft Javascript nooit echt boeiend gevonden.

[ Voor 13% gewijzigd door Elvis op 21-02-2009 11:32 ]

[Verwijderd]

Spockz schreef op zaterdag 21 februari 2009 @ 11:11:
Kijk eens of je functie sowieso wordt uitgevoerd. Doormiddel van bijv. Firebug voor Firefox of door het plaatsen van een alert() in je functie.

Als je vervolgens Firebug geïnstalleerd hebt kun je je JS code ook debuggen.

Ik heb firebug geïnstalleerd en die geeft bij deze functie:

JavaScript:

function pointSwitch(pointid){
if (document.getElementById(pointid).src = "style/point.png"){
document.getElementById(pointid).src = "style/point2.png";
} else {
document.getElementById(pointid).src = "style/point.png";
}
}

aan dat de eerste keer de bij 'if' gestelde vraag waar is en daarom verandert het script het pad naar style/point.png. Maar bij de tweede klik zou het script dus de gestelde vraag als onwaar moeten bevinden en dus het pad veranderen naar het bij 'else' aangegeven pad, maar dat gebeurt niet. Firebug geeft aan dat bij de tweede klik en alle daarop volgende klikken het pad steeds weer verandert naar style/point2.png. De functie ziet volgens mij de waarde van src nog steeds als style/point.png, waardoor hij het steeds weer verandert in style/point2.png. Dit werkt dus niet, ik kom er niet uit waarom. Bij de oude code uit de TS geeft firebug aan dat het script trouwens helemaal niets doet.

Osiris schreef op zaterdag 21 februari 2009 @ 11:18:
Als ik hier lokaal dat stukje code neerplemp en vervolgens de document.getElementById(pointid).src in een alert() smijt, dan krijg ik de volledige path te zien?

En als ik het 2e plaatje in de else smijt (want die check komt ie dus niet 'door' omdat hij de path volledig ziet en je checkt voor alleen de filename), dan verandert het plaatje probleemloos.

Dit gebeurt bij mij ook, maar dit is niet het gewenste resultaat.

Elvis schreef op zaterdag 21 februari 2009 @ 11:30:
Zou het niet gemakkelijker zijn om de naam van het plaatje in een variable op te slaan ipv eerst altijd te moeten kijken in je HTML welk plaatje er op dit moment staat?

JavaScript:

var plaatje = "point.png";

function pointSwitch(pointId) {
    if(plaatje == "point.png") {
        plaatje = "point2.png";
    }
    else {
        plaatje = "point.png";
    }
    document.getElementById(pointId).src = "style/"+plaatje;
}

Disclaimer: Elvis is niet zeker dat deze code 100% correct is. Elvis heeft Javascript nooit echt boeiend gevonden.

Dit script werkt bij mij probleemloos, maar het heeft één probleem. Als je meerdere divisions hebt moet het pijltje veranderen per division. Met dit script wordt er gewoon de hele tijd afgewisseld zonder te letten op de huidige status. Er kunnen dan dit soort situaties ontstaan:



Als de division opengeklapt is moet het het pijltje altijd naar beneden staan en als de division dicht is altijd naar rechts.
Het script uit de TS is daar wel geschikt voor, dus ik wil dat graag werkend krijgen. Kan iemand mij helpen?

[ Voor 10% gewijzigd door Verwijderd op 21-02-2009 12:42 . Reden: Foutje in het script ]

[Cousin Boneless]

Osiris geeft het enige juiste antwoord. Je controle mislukt constant doordat de property 'src' consequent de volledige url terug geeft. Dus je dient te controleren op de volledige url, of je code wat slimmer maken.

code:

function pointSwitch(pointid){
    var img = document.getElementById(pointid);
    alert(img.src);
    
    img.src = status[pointid]?'style/point.png':'style/point2.png';
    status[pointid] ^= true;
}

// initialisatie
var status = {point1: false};

(kan vast netter.. even snel in elkaar gefrut)

[ Voor 4% gewijzigd door Cousin Boneless op 21-02-2009 13:36 ]

[Verwijderd]

In je eerste post staat dat je in je IF "==" gebruikt, en in je laatste post zie ik er nog maar één ("=").

Voor vergelijkingen, in een IF statement dus, moet je sowieso "==" gebruiken wanneer je wilt controleren op gelijkheid.

Om je vraag te beantwoorden: nu krijgt plaatje telkens de waarde die in regel 1 (var plaatje = "point.png"; ) wordt geset, hoe en waar zou je dit moeten veranderen om de huidige waarde van het plaatje hierin te krijgen?

[Verwijderd]

Ok, heel erg bedankt allemaal, hier ga ik mee aan de slag!

[Verwijderd]

Het is me volgens mij gelukt! Dit is wat ik nu heb:

JavaScript:

}
function pointSwitch(pointId) {
    var plaatje = document.getElementById(pointId).src;
        if(plaatje == "http://192.168.1.8/lp/style/point.png") {
        plaatje = "point2.png";
        }   
        else {
        plaatje = "point.png";
        }
    document.getElementById(pointId).src = "style/"+plaatje;
}

In de functie wordt eerst de variabele gemaakt waarin de url van het huidige plaatje staat --> deze wordt vergeleken met de standaard url (als de division niet opengeklapt is). Als deze gelijk zijn, wordt de division dus opengeklapt en wordt het plaatje point2.png. Als het niet zo is --> plaatje wordt point.png. Nu wordt het dus bepaald per division!
Heel erg bedankt allemaal voor alle hulp. Er zelf uitkomen met hulp is altijd beter dan het kant en klaar voorgeschoteld krijgen .

Mocht iemand nog zin hebben, dan heb ik nog één vraag: hoe kan ik de url die 'document.getElementById(pointId).src' teruggeeft relatief maken zodat alleen het stukje 'style/point.png' er nog staat?

[spone]

Misschien een ideetje, maak er in plaats van

HTML:

<a href="javascript:pointSwitch('point1')">klik</a>

iets als onderstaand van:

HTML:

<a onClick="pointSwitch('point1')" href="javascript:void(null);">klik</a>

Het lost je vraag in de topicstart niet op, maar het staat wat netter

[ Voor 13% gewijzigd door spone op 21-02-2009 14:10 ]

[Cousin Boneless]

JavaScript:

if(plaatje == "http://192.168.1.8/lp/style/point.png") { 

Haha.. voor je te hopen dat je geen dynamisch ip adres hebt.
Klein onderhoudsprobleemje geintroduceerd lijkt me.

[ Voor 27% gewijzigd door Cousin Boneless op 21-02-2009 14:13 ]

[Verwijderd]

Cousin Boneless schreef op zaterdag 21 februari 2009 @ 14:10:

JavaScript:

if(plaatje == "http://192.168.1.8/lp/style/point.png") { 

Haha.. voor je te hopen dat je geen dynamisch ip adres hebt. Klein onderhoudsprobleemje geintroduceerd lijkt me.

Ja, dat is precies nog de enige manke aan dit script Gelukkig wordt het straks gehost op een server met een vast ip-adres, dus dat is geen probleem. Het zou wel leuk zijn om het relatief te maken.

spone schreef op zaterdag 21 februari 2009 @ 14:09:
Misschien een ideetje, maak er in plaats van

HTML:

<a href="javascript:pointSwitch('point1')">klik</a>

iets als onderstaand van:

HTML:

<a onClick="pointSwitch('point1')" href="javascript:void(null);">klik</a>

Het lost je vraag in de topicstart niet op, maar het staat wat netter

Het wordt er allemaal weer iets mooier van, dus toch bedankt.

Maar goed, de hoofdvraag is beantwoord, dus dit topic kan op slot.

[ Voor 29% gewijzigd door Verwijderd op 21-02-2009 14:14 ]

[spone]

Wat dat andere betreft, je zou nog kunnen proberen het als volgt te doen:

• Positie van laatste '/' opzoeken met indexOf(), of beter gezegd lastIndexOf().
• Die positie+1 tot en met het einde pakken met behulp van substr()
• De uitkomst daarvan vergelijken met plaatje

Dat moet je makkelijk zelf kunnen doen, maar dan heb je een idee hoe je het ook aan kan pakken.

[ Voor 23% gewijzigd door spone op 21-02-2009 14:24 ]

[Cousin Boneless]

HTML:

<a onClick="pointSwitch('point1')" href="javascript:void(null);">klik</a>

Wat wordt er mooier van? Dat je nu in 2 attributen javascript hebt staan?
Dus geef gewoon false terug uit de onclick en je link wordt niet gevolgd. Hou je href nog vrij voor evt. toegankelijkheid (als js is uitgeschakeld)

HTML:

<a onclick="pointSwitch('point1'); return false" href="#">klik</a>

De topic gaat nu vast niet meer op slot, dan was dat al veel eerder gebeurd

[miereneukmode]
Bovendien: tegenwoordig is het weer 'onclick' en niet meer 'onClick'.
[/miereneukmode]

[spone]

Cousin Boneless schreef op zaterdag 21 februari 2009 @ 14:37:
[...]

HTML:

<a onclick="pointSwitch('point1'); return false" href="#">klik</a>

# lijkt me ook geen fantastische oplossing, daar wil een browser nog wel eens naar de bovenkant van een pagina springen, niet echt wat je verwacht bij het klikken op een link die nergens naartoe zou moeten gaan. Of gaat dat return false dat nou juist weer tegen?

[Eijkb]

Ben ik nou gek of moet je gewoon [ ] gebruiken i.p.v. ( )? Ben zelf ook een redelijke copy / paste noob maar ik gebruik altijd [ ]. Vandaar.

[Cousin Boneless]

Dat is inderdaad het nut van de return false.

[curry684]

Eijkb schreef op zaterdag 21 februari 2009 @ 14:44:
Ben ik nou gek of moet je gewoon [ ] gebruiken i.p.v. ( )? Ben zelf ook een redelijke copy / paste noob maar ik gebruik altijd [ ]. Vandaar.

Uhm ronde en vierkante haken betekenen NOGAL wat anders in code. Tis bij programmeren niet zo dat er aan de andere kant een intelligent persoon zit die kan gokken wat je bedoelt, je moet syntactisch correcte code schrijven. In short: [ ] is de index-operator, ( ) is de function-call operator.

[Verwijderd]

Cousin Boneless schreef op zaterdag 21 februari 2009 @ 14:37:
[...]

Wat wordt er mooier van? Dat je nu in 2 attributen javascript hebt staan?
Dus geef gewoon false terug uit de onclick en je link wordt niet gevolgd. Hou je href nog vrij voor evt. toegankelijkheid (als js is uitgeschakeld)

HTML:

<a onclick="pointSwitch('point1'); return false" href="#">klik</a>

De topic gaat nu vast niet meer op slot, dan was dat al veel eerder gebeurd

[miereneukmode]
Bovendien: tegenwoordig is het weer 'onclick' en niet meer 'onClick'.
[/miereneukmode]

Bedankt voor de tip, weer wat geleerd.

[crisp]

JavaScript:

var currentSrc = document.getElementById(pointid).getAttribute('src', 2);

Dit geeft de letterlijke inhoud van het src-attribuut ipv een FQ URI (note ook het 2e argument voor getAttribute, die is specifiek nodig voor IE).

Over het misbruik van het A-element: als iets geen link is gebruik dan ook geen anchor

[Verwijderd]

crisp schreef op zaterdag 21 februari 2009 @ 14:57:

JavaScript:

var currentSrc = document.getElementById(pointid).getAttribute('src', 2);

Dit geeft de letterlijke inhoud van het src-attribuut ipv een FQ URI (note ook het 2e argument voor getAttribute, die is specifiek nodig voor IE).

Over het misbruik van het A-element: als iets geen link is gebruik dan ook geen anchor

Dat werkt goed! Maar waar is die 2 voor op he eind van de regel?

[crisp]

Verwijderd schreef op zaterdag 21 februari 2009 @ 15:07:
[...]


Dat werkt goed! Maar waar is die 2 voor op he eind van de regel?

Like I said: dat is een specifieke IE-extensie: http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx

2 Returns the value exactly as it was set in script or in the source document.

[Verwijderd]

crisp schreef op zaterdag 21 februari 2009 @ 15:12:
[...]

Like I said: dat is een specifieke IE-extensie: http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx

[...]

Oeps, ja ik zie het

[Eijkb]

curry684 schreef op zaterdag 21 februari 2009 @ 14:48:
[...]

Uhm ronde en vierkante haken betekenen NOGAL wat anders in code. Tis bij programmeren niet zo dat er aan de andere kant een intelligent persoon zit die kan gokken wat je bedoelt, je moet syntactisch correcte code schrijven. In short: [ ] is de index-operator, ( ) is de function-call operator.

Dat snap ik, maar in de TS zie je "getElementById(pointid)", ik ken dat alleen als "getElementById[pointid]". Je roept daar toch geen functie aan?

[Osiris]

Eijkb schreef op zondag 22 februari 2009 @ 12:59:
[...]


Dat snap ik, maar in de TS zie je "getElementById(pointid)", ik ken dat alleen als "getElementById[pointid]". Je roept daar toch geen functie aan?

document.getElementById

[curry684]

Eijkb schreef op zondag 22 februari 2009 @ 12:59:
[...]


Dat snap ik, maar in de TS zie je "getElementById(pointid)", ik ken dat alleen als "getElementById[pointid]". Je roept daar toch geen functie aan?

Uhm tis iets wat je aanroept, een parameter meegeeft en dat een resultaat teruggeeft - in mijn boekje is dat een functie

[Verwijderd]

curry684 schreef op zondag 22 februari 2009 @ 17:49:
[...]

Uhm tis iets wat je aanroept, een parameter meegeeft en dat een resultaat teruggeeft - in mijn boekje is dat een functie

Nee, er is één groot verschil tussen het ophalen van een bepaalde index uit een array en een functie aanroepen...en dat verschil is dat er bij een functie-aanroep code uit kan/zal worden gevoerd.

Of je moet heel flauw gaan doen en de []-operator gaan overloaden (C# bijvoorbeeld), maar dat is hier niet van toepassing.