Hoe werkt SetTimeOut?

Status
Niet open voor verdere reacties.
D

Dayan

Nieuwe gebruiker
Lid geworden
29 mei 2007
Berichten
3
Na html en css ben ik nu bezig Javascript onder de knie te krijgen en probeer ik te doorgronden hoe functies werken. Ik ben dus een absolute beginner.

Op dit moment ben ik bezig met de functie "SetTimeOut"

Ik heb een knop gemaakt, als de muis eroverheen gaat komt er een blokje tekst tevoorschijn. Als de muis er weer afgaat, verdwijnt de tekst weer.
Nu zou ik graag willen dat de tekst even blijft staan alvorens hij verdwijnt.

Na enig speurwerk op het net, heb ik de functie SetTimeOut gevonden, en die heb ik als volgt geprobeerd toe te passen:


Dit is de html code:

<html>
<head>
<title>probeersel met javascript</title>
<link href="stijlblad.css" rel="stylesheet" type="text/css"/>
<script src="java.js" type="text/javascript" language="javascript"></script>
<head>
<body>
<div class="knop1" onmouseover="uitklappen('menu')"
onmouseout="verstoppen('menu')">
</div>

<div id="menu" class="menu1">Dit is het menu<br>
Nu moet hij een tijdje blijven staan, vordat hij weer verdwijnt</div>

</body>

</html>

En dit javascript:

function uitklappen(id)
{
document.getElementById(id).style.visibility='visible';
}

function verstoppen(id)
{
document.getElementById(id).style.visibility='hidden';
}

function vertraagmenu()
{
setTimeout("verstoppen()",5000)
}

Ik pas de functie dus verkeerd toe want dit werkt niet. Ik denk dat ik de functie "vertraagmenu" nog ergens moet aanroepen, maar ik weet niet waar. En ik vraag me af of ik de functie wel juist geschreven heb en juist probeer toe te passen.

Is er iemand die mij op weg kan helpen?
 
Als je dus de volgende regel wijzigt in het volgende moet hij werken, en ik geloof dat als je de nieuwe met de oude vergelijkt dan weet je wel wat je fout hebt gedaan, in plaats van de functie verstoppen(menu) aan te roepen, moet je de functie vertraagmenu() aanroepen en in de functie van vertraagmenu() bij verstoppen() ==> verstoppen(menu) inult zal deze best werken.

HTML: 
<html>
<head>
<title>probeersel met javascript</title>
<link href="stijlblad.css" rel="stylesheet" type="text/css"/>
<script src="java.js" type="text/javascript" language="javascript"></script>
<head>
<body>
<div class="knop1" onmouseover="uitklappen('menu')"
onmouseout="vertraagmenu()">
</div>

<div id="menu" class="menu1">Dit is het menu<br>
Nu moet hij een tijdje blijven staan, vordat hij weer verdwijnt</div>

</body>

</html>


en je javascript ziet er dan als volgt uit
HTML: 
function uitklappen(id)
{
document.getElementById(id).style.visibility='visible';
}

function verstoppen(id)
{
document.getElementById(id).style.visibility='hidden';
}

function vertraagmenu()
{
setTimeout("verstoppen(menu)",5000)
}

Ik hoor het wel of het gelukt is
 
Dank je wel voor je snelle reactie.
Ik heb dus de verkeerde functie aangeroepen.Nu ik het gewijzigd heb, blijft het blokje met tekst inderdaad staan.

Alleen mijn bedoeling was dat dit blokje tekst ook weer verdwijnt na 5 seconden.

Ik had begrepen dat je in de functie SetTimeOut het aantal miliseconden moet invullen, vandaar dat ik 5000 heb ingevuld. Maar het blokje tekst verdwijnt niet na 5 seconden, dus waarschijnlijk doe ik nog iets fout.

Weet jij wat ik fout doe?
 
Ik heb eens gekeken, het zou ook de bedoeling zijn dat er een style gedefinieerd staat bij de div tag naar mijn idee.

Ik heb de code aan gepast en er het volgende uitgekomen.

HTML: 
<html> 
<head> 
<title>probeersel met javascript</title> 
<link href="stijlblad.css" rel="stylesheet" type="text/css"/> 

<script src="java.js" type="text/javascript" language="javascript"></script> 
<head> 

<body > 

<div class="knop1" onmouseover="verstoppen()" onmouseout="vertraagmenu()">Mouseover om menu te laten verschijnen</div> 

<div id="menu" class="menu1" style="visibility: hidden;" >Dit is het menu<br> Nu moet hij een tijdje blijven staan, vordat hij weer verdwijnt</div> 

</body> 

</html>

en de javascript

HTML: 
function verstoppen()
{
document.getElementById('menu').style.visibility='visible';
}

function vertraagmenu()
{
setTimeout("document.getElementById('menu').style.visibility='hidden'",5000);
}

Ik geloof dat dit wel een beetje in de richting tot jouw idee is. Als je er niet uitkomt hoor ik het vanzelf.
Groet,
Ricky
 
Dit is inderdaad de bedoeling. Van hier uit kan ik eerst weer verder.
Hartelijk dank voor je hulp
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan