javascript start pas bij tweede click

[Verwijderd]

Goeiedag,

Ik heb een site gemaakt met daarin een stukje javascript. Weet daar weinig van en er gebeurt nu iets waarvan ik de oplossing niet kan vinden.

Ik gebruik een standaard scriptje om het achtergrondplaatje van een div te veranderen. Het probleem is de verandering pas optreed bij de tweede click. Waarom????

Het is te zien op:www.daanooms.nl, zie link "change background"

Dit is het script dat in een extern bestand staat:

code:

function swap()
{
if (document.getElementById("site").style.backgroundImage=='url(../images/inbouw762.jpg)')
{
document.getElementById("site").style.backgroundImage='url(../images/inbouw762snachts.jpg)';
}
else
{
document.getElementById("site").style.backgroundImage='url(../images/inbouw762.jpg)';
}
}

En dit is de link waarvandaan ik 'm aanroep:

code:

<a href="#" onclick="swap()" class="link">change background<a/>

Maar het werkt ook vanaf zoiets (ik weet niet wat de juiste manier is)

code:

<a href=javascript:;swap>change background</a>

Kan iemand vertellen hoe ik er voor kan zorgen dat de functie meteen bij de eerste klik wordt uitgevoerd?

[ Voor 8% gewijzigd door Verwijderd op 15-03-2006 20:46 ]

[djexplo]

Blijkbaar, is de eerste keer is de eerste keer de url niet "../images/inbouw762.jpg" maar b.v. "http://www.daanooms.nl/.../images/inbouw762.jpg".
Meestal gebruikt men dus een extra variabel b.v. var a=0; if a==1 etc...

[ Voor 44% gewijzigd door djexplo op 15-03-2006 20:51 ]

[Verwijderd]

je moet de style eerst mbv javascript setten om hem met js uit te kunnen lezen. De eerste keer bevat style.backgroundImage nog niets, dus != inbouw762.jpg, en dus wordt dan inbouw762.jpg dmv javascript als backgroundImage gezet. de tweede keer kan die property wel uitgelezen worden, dus dan werkt het wel.
hier kun je lezen hoe je stijlen toch kunt uitlezen

[ Voor 82% gewijzigd door Verwijderd op 15-03-2006 20:58 ]

[Verwijderd]

ok bedankt, zal het gaan bekijken, maar op dit moment is m'n site niet goed bereikbaar..

[Verwijderd]

Als ik het goed begrijp is het dus van belang om het juiste woord te gebruiken?

Ik heb gebruikt en getest op de eerder genoemde pagina in FF:

document.getElementById("site").style.background-image
geeft testresultaat: none (dat klopt)
Maar werkt in javascript niet en heeft bovendien invloed op andere dingen in de site zoals een ander script dat dan ook niet meer wordt uitgevoerd.


document.getElementById("site").style.background-Image
geeft testresultaat: none (dat klopt)
Maar werkt in javascript niet en heeft bovendien invloed op andere dingen in de site zoals een ander script dat dan ook niet meer wordt uitgevoerd.

document.getElementById("site").style.backgroundImage
geeft geen testresultaat
Werkt als script wel, maar pas bij de tweede keer klikken, en heeft ook geen invloed op andere scripts.

Al met al begrijp ik er weinig van: de gene die dus wel een testresultaat opleveren, een id, werken niet en die laatste wel alleen nog steeds met 2 keer klikken.....Hoe kan ik zorgen dat die meteen goed geset is?

[ Voor 15% gewijzigd door Verwijderd op 15-03-2006 23:40 ]

[crisp]

Het is heel simpel; met JS kan je alleen expliciet gesette styles uitlezen, impliciete styles (dus browser defaults of style-rules middels een stylesheet) zijn enkel met getComputedStyle/currentStyle te achterhalen.

[Verwijderd]

Na zoeken en wat proberen: ik weet te weinig van Javascript...

Zou je een voorbeeld kunnen geven met die getComputedStyle/currentStyle?

Of is het bijvoorbeeld mogelijk om bij onload de achtergrond van de div te setten? (Zoals de functie nu bij 1 keer klikken doet?) En hoe moet ik dat doen?

Edit: ik heb het nu zo gedaan (aan de hand van wat Juaron zei), het werkt...

code:

var z = 1;
  function changebackground()
  {
    if (z == 0)
    {
      document.getElementById("site").style.backgroundImage = 'url(http://www.daanooms.nl/images/inbouw762.jpg)';
      z = 1;
    } else {
      document.getElementById("site").style.backgroundImage = 'url(http://www.daanooms.nl/images/inbouw762snachts.jpg)';
      z = 0;
    }
  }

Maar ik ben nog steeds nieuwsgierig naar die manier met getComputedStyle/currentStyle...

[ Voor 97% gewijzigd door Verwijderd op 16-03-2006 01:14 ]

[Michali]

Voor zoiets kun je beter met een boolean oplossen.

code:

var z = true;
function changebackground()
{
    var newImage = z ? 'url(http://www.daanooms.nl/images/inbouw762.jpg)' : 'url(http://www.daanooms.nl/images/inbouw762snachts.jpg)';
    document.getElementById("site").style.backgroundImage = newImage;
    z = !z;
}

[Verwijderd]

Waarom is die manier beter?

Heb 'm net geprobeerd. maar het blijkt dat pas bij de tweede click de background image begint te switchen..

[Michali]

Dan moet je z even false geven als initiële waarde. Die manier is beter, omdat je wilt controleren of je met de ene of de andere situatie te maken hebt. Een boolean is daar uiterst geschikt voor, omdat die maar 2 waardes kan hebben. Dat communiceert beter en is logischer. Het enige wat je nog kunt verbeteren is om z een duidelijkere naam te geven. Je zou hem bijvoorbeeld isAlternative kunnen noemen oid. Je moet maar kijken naar wat het beste 1 van de 2 situaties omschrijft, en hij moet dan true als waarde hebben als je je in die situatie bevindt.

[Verwijderd]

Das helder, bedankt.