[JS] Functie werkt pas na 2 maal klikken - Softwareontwikkeling

woensdag 20 februari 2002 19:38

Acties:

@life-

Topicstarter

ik ben een beetje bezig met JavaScript, en nu heb ik een css-menu wat ik een tijd geleden hier tegenkwam:

http://gathering.tweakers.net/forum/list_message/11987293#11987293

ik heb dmv functions in JS het menutje zo gemaakt dat je met 2 functies het menu kan genereren:

code:

    <script language="javascript">
        <!--
            var menuarray = new Array(2)
            menuarray["menu1"] = ""
            menuarray["menu2"] = ""
            menuarray["menu3"] = ""
            menuarray["menu4"] = ""

            WriteStyles(menuarray);
        //-->
    </script>
</head>
<body onSelectStart="return false">
    <script language="javascript">
        <!--
            var array1 = new Array(3)
            array1["tweakers.net"] = "http://www.tweakers.net/"
            array1["rayflexcom.nl"] = "http://www.rayflexcom.nl/"
            array1["speed-online.nl"] = "http://www.speed-online.nl/"
            
            menu('menu1','Het eerste menu',array1)

            var array2 = new Array(3)
            array2["tweakers.net"] = "http://www.tweakers.net/"
            array2["rayflexcom.nl"] = "http://www.rayflexcom.nl/"
            array2["speed-online.nl"] = "http://www.speed-online.nl/"
            
            menu('menu2','Het tweede menu',array2)

            var array3 = new Array(3)
            array3["tweakers.net"] = "http://www.tweakers.net/"
            array3["rayflexcom.nl"] = "http://www.rayflexcom.nl/"
            array3["speed-online.nl"] = "http://www.speed-online.nl/"
            
            menu('menu3','Het derde menu',array3)

            var array4 = new Array(3)
            array4["tweakers.net"] = "http://www.tweakers.net/"
            array4["rayflexcom.nl"] = "http://www.rayflexcom.nl/"
            array4["speed-online.nl"] = "http://www.speed-online.nl/"
            
            menu('menu4','Het vierde menu',array4)
        //-->
    </script>
</body>

alleen het probleem is, ik moet de eerste keer na het laden van de pagina 2 keer klikken op het menuonderdeel.

hier is de code

http://speed-online.nl/test/menu.html

/PS
ja ik weet het, de code zal wel slordig zijn enzo, maar ik ben een beginner in JS

mijn T.net systeemspecspagina

woensdag 20 februari 2002 21:59

Acties:

crisp

Devver

Pixelated

Mmmm, de techniek komt me vaag bekend voor

Het probleem zit 'm hierin:

code:

1	if(that.style.height == '18px')

Dit is de eerste keer namelijk nooit waar, omdat die waarde nog niet is toegekend. Beter is de logica om te draaien:

code:

    function HideOrShow(that)
    {
        if(that.style.height == 'auto')
        {
            that.style.height='18px'
            that.plusormin = "-";
        }
        else
        {
            that.style.height='auto'
            that.plusormin = "+";
        }
    }

zou moeten werken...

Een andere (betere?) oplossing is om bij het schrijven van het menu de height al expliciet op 18px te zetten dmv document.getElementById(ID).style.height = '18px'
Tegenwoordig gebruik ik trouwens meer pixelHeight (omdat dat een integer is waarmee je lekker kunt rekenen).

Nog 1 tip betreffende debuggen van scripts: af en toe eens ergens een alert tussenzetten; had je in de functie HideOrShow een alert(that.style.height) gezet was je er binnen 10 seconden achtergekomen wat er fout was...
Een window.status = blaatieblaat werk vaak ook heel lekker met debuggen (gebruik ik vaak als ik dingen met coordinaat bepaling aan het proggen ben).

Intentionally left blank

woensdag 20 februari 2002 23:41

Acties:

RRX

@life-

Topicstarter

Op woensdag 20 februari 2002 21:59 schreef crisp het volgende:
Mmmm, de techniek komt me vaag bekend voor

[..]

Sorry, was niet thuis, kon niet gelijk reageren

. Maaru,

code:

1	Mmmm, de techniek komt me vaag bekend voor :)

daarom linkte ik ook naar jouw reactie

ik kan er nu niet ff naar kijken, moet andere dingen doen, maar ik kick dit topic wel ff als het gelukt is

mijn T.net systeemspecspagina

donderdag 21 februari 2002 03:21

Acties:

RRX

@life-

Topicstarter

ik heb hem aangepast, en hij werkt perfect nu

trouwens:

code:

    function HideOrShow(that)
    {
        if(that.style.height == 'auto')
        {
            that.style.height='18px'
            that.plusormin = "-";
        }
        else
        {
            that.style.height='auto'
            that.plusormin = "+";
        }
    }

that.plusormin = "-" | "+"; kon ook weg, stond er nog van oud uitprobeersel

mijn T.net systeemspecspagina