[JS] variabele wil zich niet aanpassen

[Blaise]

Ik heb een code met een random image als achtergrond van een div. Ik wil graag dat je dan ook de volgende of vorige image kan kiezen als achtergrond dmv een "next" en "previous" knop. Alle images zijn genummerd van 1 tot 10.

Mijn code:

code:

// hoogste plaatje
max = 10;

// of er al langs die variabele is gegaan (waarschijnlijk overbodig)
bla = 0;

// random image wordt gegenereerd door php
if (bla != 1)
{
huidige = <? echo"$randomnummer"; ?>;
}

next = huidige + 1;
previous = huidige - 1;

// bij laatste plaatje is de volgende 1
if (huidige == max)
{
next = 1;
}

// bij eerste plaatje is de vorige de laatste
if (huidige == 1)
{
previous = max;
}

document.write("
<a href='#' 
onclick=\"document.getElementById('pattern').style.backgroundImage='url(map/pattern_'+previous+'.gif)'; 
huidige = huidige -1; 
bla = 1; \">
vorige</a> ");

document.write("
<a href='#'
onclick=\"document.getElementById('pattern').style.backgroundImage='url(map/pattern_'+next+'.gif)'; 
huidige = huidige + 1; 
bla = 1; \">
volgende</a>");

Als je op "volgende" klikt krijg je het volgende plaatje te zien als achtergrond. Alleen veranderd de variabele "huidige" niet . Daardoor kan je "volgende" maar 1x klikken.
Het probleem ligt denk ik bij de onclick, maar ik heb geen idee hoe het op te kunnen lossen, en ik heb al vanalles geprobeerd (ben al sinds half 3 bezig (nachtmens )).

De huidige code geeft geen errors.

(er zitten een paar extra enters in voor de layout, normaal staat het document.write gedeelte op 1 regel)

[marty]

het komt misschien omdat het allemaal in die onclick zit en achter de eerste ; staat. ik heb daar ook wel eens problemen mee, dat ie het gedeelte na die ; dan gewoon niet meer pakt.
oplossing: roep gewoon een functie aan in je onclick die alles doet. Vind ik persoonlijk nog netter ook

[Verwijderd]

Probleem is natuurlijk dat je met document.write keihard die variabelen previous en next in de source zet. Overigens is er een mooiere manier om met previous en next te werken, zonder allerlei overbodige (en dus lelijke) if constructies:

previousImage = --currentImage % totalImages;
en
nextImage = ++currentImage % totalImages;
of nog iets anders, dat ik verder naar beneden beschrijf...

Je hebt gegarandeerd een geheel getal, die in het bereik {0, totalImages-1} ligt.

Maar nu het echte probleem: je kunt gewoon een functie schrijven, doe koppelen aan het onclick event, en de variabelen door de functie laten veranderen. Dus het document.write gebeuren moet er een beetje uit:

Stel, je maakt gewoon deze links:
<a href="#" onclick="cycleBackgroundImage('pattern', -1); return false;">Vorige</a>
<a href="#" onclick="cycleBackgroundImage('pattern', 1); return false;">Vorige</a>

En je maakt de volgende javascript functie:

JavaScript:

function cycleBackgroundImage(id, number) {
  currentImage = (currentImage + number) % totalImages;
  document.getElementById(id).style.backgroundImage = 'url("map/pattern_' + currentImage + '.gif")';
}

Dan moet je alleen nog even currentImage bijhouden als globale variabele, of property van het object van het div element, en eventueel zelf een iets andere constructie bedenken als je het wilt uitbreiden voor meerdere div's op één pagina.

[Blaise]

Ik heb even wat ideetje overgenomen. Cheatahs script had ik veel aan, maar kon ik niet helemaal overnemen door andere functies die ik ermee wil doen. Dit is wat ik nu heb: Alles werkt, behalve het real-time meetellen van pattern "currentImage/totalImage". Terwijl die variabele wel wordt upgedate, want het backgroundpattern-update gedeelte werkt wel gewoon.

code:

<script>
totalImages = <? echo"$totaal"; ?> ;
currentImage = <? echo"$randomimage"; ?> ;

function FIRST() {
document.getElementById('pattern').style.backgroundImage = 'url("map/pattern_1.gif")';
currentImage = 1;
}

function LAST() {
document.getElementById('pattern').style.backgroundImage = 'url("map/pattern_' + totalImages + '.gif")';
currentImage = totalImages;
}

function PREV() {
  currentImage = currentImage + -1;
  if (currentImage < 1){currentImage = totalImages;}
  document.getElementById('pattern').style.backgroundImage = 'url("map/pattern_' + currentImage + '.gif")';
}

function NiXT() {
  currentImage = currentImage + 1;
  if (currentImage > totalImages){currentImage = 1;}
  document.getElementById('pattern').style.backgroundImage = 'url("map/pattern_' + currentImage + '.gif")';
}

</script>
<a href="#" onclick="FIRST(); return false;">--</a> //
<a href="#" onclick="PREV(); return false;">-</a> //
<a href="#" onclick="NiXT(); return false;">+</a> //
<a href="#" onclick="LAST(); return false;">++</a>
<br>

<script>
// DIT WERKT DUS NIET
document.write('pattern ' + currentImage +'/'+ totalImages);
</script>

[Verwijderd]

Nee, als je dat wilt veranderen moet je toch echt van die document.write af. Dynamisch aanpassen kan natuurlijk alleen met DHTML:

Zet in plaats van dat laatste script het volgende neer:

document.write('<span id="counter">pattern ' + currentImage + '/' + totalImages + '</span>');


Op deze manier kun je met document.getElementById('counter').innerHTML dat getalletje bijhouden.

[Blaise]

Thank you soooo much! Het werkt.
En die innerhtml oplossing zal nog goed van pas komen