toggle menu- from the course

[amitte]

hallo there..

 

i have been trying to create the toggle menu that was explaind by stefan in the JS basic course.

 

the result- the onOff button work just fine. The problem is in the "list" function- instead of returning the "text" var it returns

 

the whole code that inside the function.

 

this is the JS code

 

 function about_spin() {

   var topics = new Array();

   topics[0] = "about";
   topics[1] = "zayin";
   topics[2] = "katan";
   topics[3] = "shelcha";

   var taxt="";

   for (var i = 0; i < topics.length; i++)

   {
   text = text + topics[i];    
   }


return text;
}


var onOff = "off";

function insertAbout()
{
   if (onOff == "off")
   {
       var ulist = document.getElementById("aboutTopics");
       var aboutSpin = about_spin;
       ulist.innerHTML=aboutSpin;
       onOff = "on";
}

   else 
   {
       var ulist = document.getElementById("aboutTopics");
       var aboutSpin = "";
       ulist.innerHTML=aboutSpin;
       onOff = "off";

   }



} 

 

this is the html code-

 

bla bla 
 bla bla 







 

 ???? ????? 




about

[amitte]

it also write "function about_spin () { "

 

befor- "var topics = new.........".

 

in the browser

[virtual]

I have no clue about Javascript, but I did notice that you have named

var taxt="";

shouldn't this be

var text="";

[amitte]

oh man... what an embarrassment..

 

so stupid!!!! and i chacked for spelling mistakes and all the little thingings= ' " ;

 

dammm

 

ok..

 

so thank u very much.. but..

 

still- dont work.....

 

whyy???!! god??? why her?

[falkencreative]

If I understand what you are trying to do, I believe this code works the way you want it to (I removed some of the extranious code in the HTML section, you can add that back in):

 

>


Test page

<br />        function about_spin() {<br />    <br />            var topics = new Array();<br />            topics[0] = "about";<br />            topics[1] = "zayin";<br />            topics[2] = "katan";<br />            topics[3] = "shelcha";<br />    <br />            var text="";<br />    <br />            for (var i = 0; i < topics.length; i++)<br />            {<br />                text = text + topics[i];    <br />            }<br />    <br />            return text;<br />        }<br /><br /><br />        var onOff = "off";<br /><br />        function insertAbout()<br />        {<br />            if (onOff == "off")<br />            {<br />                var ulist = document.getElementById("aboutTopics");<br />                var aboutSpin = about_spin();<br />                ulist.innerHTML=aboutSpin;<br />                onOff = "on";<br />            }<br />            else <br />            {<br />                var ulist = document.getElementById("aboutTopics");<br />                var aboutSpin = "";<br />                ulist.innerHTML=aboutSpin;<br />                onOff = "off"; <br />            }<br />        } <br />    




</pre>
<ul>
about


</ul>
<br><br

 

I think the main change that I did that should fix your sample is this line in your code (in the insertAbout() method):

 

var aboutSpin = about_spin;

 

needs to be:

 

var aboutSpin = about_spin();

 

The parentheses at the end are important, because that's what indicates to Javascript that you're calling a function, rather than just assigning it a value of a variable.

 

For future reference, one way to bugcheck if you are having issues is use the statement

 

alert("alert"); 

 

within your code, to make sure functions are being called properly. For example, when testing your code, I added that line twice -- once at the top of insertAbout() method, and once in the about_spin() method. That way, I could confirm that both were being run properly. I got an alert for the insertAbout() method when I clicked on the text, which told me that it was working correctly, but I didn't get an alert for the about_spin() method, which indicated that it wasn't being called correctly, so the code was never running. That helped me find the error.

[amitte]

thank u very much... now its just fine!..

 

however,

 

i have onther problem, when the function "insertAbout" turns off again i have an extra unexplaind margin betwin the

items.

 

exept from the first loading of the page.. or after refreshing of course..

 

why?

[falkencreative]

Can you post the code you are currently working with, or a link to the page? I want to make sure I'm looking at the same code you are.

 

Most likely, it's because of some default margins or padding on the either the

or the
• s, but I really can't be sure until I know exactly what you are working with.