Een if else vraagje

Status
Niet open voor verdere reacties.
J

jelleverzijden

Nieuwe gebruiker
Lid geworden
10 mei 2008
Berichten
1
Hallo! Ik ben nieuw in de javascript wereld en heb hard hulp nodig!:(

Ik ben bezig met een scriptje dat een plaatje over het beeld laat bewegen. Nu wil ik dat wanneer het plaatje een bepaalde positie op het scherm heeft bereikt een andere functie gaat uitvoeren. Dit probeer ik als volgt:

--------------------------------------------------------------------------------------------------------------------
Code: 
<style type="text/css">
#plaatjeObject {
 /* simple box */
 position:absolute;
 width:80px;
 height:60px;
 background-image:url(file:///D|/Prive/A%20tm%20Z/P/Pixelskills/website12-03-08/site/images/Afbeelding_224.jpg);
 border:none;
 white-space:nowrap;
 padding:0.5em;
}
</style>

<script type="text/javascript">

var plaatje = null; // object


function doMove_left() {
  plaatje.style.left = parseInt(plaatje.style.left)-1+'px';
  setTimeout(doMove_left,20); // call doMove_left in 20msec
}

if (doMove_left <= 800){
	function doMove_up() {
	  plaatje.style.top = parseInt(plaatje.style.top)-1+'px';
	  setTimeout(doMove_up,20); // call doMove_up in 20msec
	}
	
	function init() {
	  plaatje = document.getElementById('plaatjeObject'); // het "plaatje" object
	  plaatje.style.top = '100px'; // zet de start positie naar 1000px
	  doMove_up(); // start animating
	}
else {
function init() {
  plaatje = document.getElementById('plaatjeObject'); // het"plaatje" object
  plaatje.style.left = '1000px'; // zet de start positie naar 1000px
  doMove_left(); // start animating
}

window.onload = init;

</script>
</head>

<body>

<h1>Plaatje laten bewegen</h1>

<div id="plaatjeObject">
 plaatje.
</div>

</body>
------------------------------------------------------------------------------------------------------------------------

De functies werken los wel maar als ik ze zo probeer te koppelen blijft het geheel stilstaan.

HULUP PLEASE:)
 
Laatst bewerkt door een moderator:
Wat moet er precies gebeuren?

Ik ben geen specialist in Javascript maar gewoon if...else... plaatsen in de head en daar functies in plaatsen werkt niet volgens mij. Ik doe zoiets toch nooit, maar het zou kunnen dat if...else... dan helemaal in het begin uitgevoerd wordt, maar dat weet ik niet. Ik denk dat dat mss wel gebeurt, maar dat het probleem is dat je nog naar niks in de body kunt verwijzen omdat die pas na de head komt. In dit geval bevat plaatje "null" en kan er sowieso nog niet verwezen worden naar het plaatje in de body. Dat zal dan mss de reden zijn dat dat niet gedaan wordt.

Functies in de head worden maar uitgevoerd als je ze aanroept in de body (of door die onload nu denk ik, maar zoiets gebruik ik nooit). Ik weet ook niet of je functies kan definiëren binnen andere functies of binnen een if-statement (aangezien ik zoiets nooit doe), maar het lijkt me vreemd. Vergeet niet dat functies nooit zomaar uitgevoerd worden zonder dat ze aanroepen worden. Wat function doet is een functie definiëren zodat je die met 1 regel ergens kan aanroepen, maar het voert niks uit en ik denk dat functies definiëren enkel op het eerste niveau, dus rechtstreeks in je javascript in de head mag.

Ik weet niet of het de bedoeling is, maar een setTimeout houdt geen pauze in: het javascript wordt gewoon verder uitgevoerd.

doMove_left is ook nergens als variabele gedefinieerd, maar je gebruikt die wel in het if-statement.

Als je aangeeft wat de bedoeling precies is kan ik of iemand anders mss een werkend script maken.
 
Laatst bewerkt:
Hallo,

Eerst even wat tips/commentaar:
"if (doMove_left <= 800){"
Een beetje verkeerd...
Je roept hier een functie aan en verwacht dat deze een return geeft.. maar die heb je niet gezet... je vergelijkt hier dus koeien met schepen.... is dus niet mogelijk...... Verder zal deze if maar éénmalig aangeroepen worden (namelijk bij het laden van de pagina!)


Code: 
	function doMove_up() {
	  plaatje.style.top = parseInt(plaatje.style.top)-1+'px';
	  setTimeout(doMove_up,20); // call doMove_up in 20msec
	}
	
	function init() {
	  plaatje = document.getElementById('plaatjeObject'); // het "plaatje" object
	  plaatje.style.top = '100px'; // zet de start positie naar 1000px
	  doMove_up(); // start animating
	}
Een functie aanmaken binnen een if..else... :shocked: Dat heb ik nog nooit eerder gezien.. betwijfel ook OF het kan... (iig wel als "variabele = function() { blaat; return null; }", maarja..)

Verder: kijk goed naar het volgende scriptje.. en leer er zoveel mogelijk van :P

M.v.g.
JB'tje

p.s. het werkt....

Code: 
<style type="text/css">
<!--
#plaatjeObject {
 position:absolute;
 width:60px;
 height:60px;
 border:#000000 1px dashed;
 background-color:#FFFFCC;
 white-space:nowrap;
 padding:0.5em;
}
-->
</style>

<div id="plaatjeObject" style="left:0px; top:0px;"></div>

<script type="text/javascript">
<!--
var stopme_ = 0;
var started_ = 0;
var plaatje = document.getElementById('plaatjeObject');
function Move_it()
{
  plaatje = document.getElementById('plaatjeObject');
  if(started_ == 0)
  {
  // started zal "1" worden als de functie is aangeroepen... daarna zal SetPosition() nooit meer aangeroepen worden...
    started_ = SetPosition();
  }

  Left = parseInt(plaatje.style.left);
  Top = parseInt(plaatje.style.top);

  if(Left < 800)
  {
    plaatje.style.left = (Left + 1) + 'px';
    setText('Nieuwe positie: (' + (Left + 1) + ', ' + Top + ')');
  }else if(Top < 800) {
    plaatje.style.top = (Top + 1) + 'px';
    setText('Nieuwe positie: (' + Left + ', ' + (Top + 1) + ')');
  }
  if(stopme_ == 0)
  {
    setTimeout("Move_it();", 20);
} }

function SetPosition()
{
  plaatje = document.getElementById('plaatjeObject');
  plaatje.style.left = '300px'; // zet de start positie naar 10px (vanaf left)
  plaatje.style.top = '300px'; // zet de start positie naar 10px (vanaf top)
  setText('positie geset! (300, 300)');
  return 1
}

function setText( Text )
{
  current = document.getElementById('console').value;
  document.getElementById('console').value = Text+"\r\n"+current;
}
window.onload = Move_it;

//-->
</script>
</head>

<body>

<h1>Plaatje laten bewegen</h1>
<textarea style="height:300px; width:250px;" id="console"></textarea>
<br />
<input type="button" onClick="stopme_=0; Move_it();" value="START!">
<input type="button" onClick="stopme_=1;" value="STOP!">

</body>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan