Jump to content

toggle menu- from the course


amitte

Recommended Posts

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



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...