Dropdown menu java script

Question

I want to hide my drop down menu, to the right so it comes out when the settings logo is clicked on but for some reason it is not working. If anyone can take a look at my code and see what the problem is it would be a great help.

 function Startgame() {
   var x = Math.floor(Math.random() * 13) + 1;
   document.getElementById('computer').src = 'card' + x + '.gif';
   document.getElementById('startButton').disabled = "false";
 }

 function reset() {
   total = 0
   document.getElementById('computer').src = 'dieDefault.gif';
   document.getElementById('img2').src = 'dieDefault.gif';
   document.getElementById('score').innerHTML = "0" + total;
 }

 function puppies() {
     document.getElementById('higher').disabled = "false";
     document.getElementById('equal').disabled = "false";
     document.getElementById('lower').disabled = "false";
   }
   /////DROPDOWN MENU/////////////
 var menuIsOpen = "false";
 window.onload = initialise;

 function initialise() {
   document.getElementById('togglemenu').onclick = navigate;
 }

 function navigate() {
   var panel = document.getElementById("menu");
   if (menuIsOpen) {
     panel.style.right = "-40em";
     menuIsOpen = "false";
     document.getElementById('togglemenu').innerHTML = "Open";
   } else {
     panel.style.top = "0em";
     menuIsOpen = "true";
     document.getElementById('togglemenu').innerHTML = "Close";
   }
 }

<div id="settings">
  <ul id="menu">
    <b> Colour</b>
    <form action="menu">
      <li>
        <input type="radio" value="blackbackground">Black BG</li>
      <li>
        <input type="radio" value="graybackground">Gray BG</li>
      <li id="togglemenu">
        <img src="settings_img.png" width="60" hieght="60">
      </li>
    </form>
</div>
<div id="bodydiv">
  <h1> Card Game</h1>
  <img src="back.gif" id="computer">
  <div id="comp">Computer</div>
  <div id="arrow">
    <img src="arrow2.png" width="100" height="100">
  </div>
  <img src="back.gif" id="player">
  <div id="play">Player</div>
  <div id="kittens">
    <button id="startButton" onclick="Startgame();">Start Game</button>
    <div id="buttons_1">
      <button id="higher" onload="puppies();">Higher</button>
      <button id="equal">Equal</button>
      <button id="lower">Lower</button>
    </div>
    <button id="draw" onclick="Startgame();">Draw your card</button>
    <div id="resetscore"> <a href="url">Reset Score </a>
    </div>
  </div>
  <div id="score"></div>
</div>

What does "not working" mean? What behavior is it exhibiting? — Jonathan M
– Jonathan M, Commented Dec 9, 2014 at 17:24
I want the drop down to hide when the page is loaded, and when the settings logo is clicked on for the drop down to appear. Sorry for the terrible explanation — MysteryX
– MysteryX, Commented Dec 9, 2014 at 17:31

benomatis · Accepted Answer · 2014-12-09 18:00:56Z

Your code is bleeding inconsistencies and errors, so I'm not even sure where to begin.

A couple of things:

if you want to check a variable if it's true, its value should be boolean (true or false), not text ("true" or "false"); if you put the boolean between quotation marks, it becomes text and you won't be able to check against it like you do it. So if you say var value = "true" then checking against it would be if (value == "true") and not if (value). Latter one would only work if you set var value = true (without the quotation marks).
You have to set your element's basic CSS value in order top to work, ie, set it to position:relative; top:-40em (hidden by default).
Replace document.getElementById('togglemenu').onclick = navigate; with document.getElementById('togglemenu').onclick = function() { navigate() };
You won't need to initialize if you set the CSS properly to hide the menu initially.

Here is the updated code removing fluff, as it was irrelevant:

var menuIsOpen = false;
document.getElementById('togglemenu').onclick = function() { navigate() };

function navigate() {
    var panel = document.getElementById("menu");
    if (menuIsOpen) {
        panel.style.top = "-40em";
        menuIsOpen = false;
        document.getElementById('togglemenu').innerHTML = "Open";
    } else {
        panel.style.top = "0em";
        menuIsOpen = true;
        document.getElementById('togglemenu').innerHTML = "Close";
    }
}

#menu {
    position:relative;
    top:-40em;
}

<div id="settings">
    <ul> <b> Settings</b>
            <li id="togglemenu">
                <img src="http://placehold.it/140x100" width="60" hieght="60" />
            </li>
    </ul>
    <ul id="menu"> <b> Colour</b>
        <form action="menu">
            <li>
                <input type="radio" value="blackbackground" />Black BG</li>
            <li>
                <input type="radio" value="graybackground" />Gray BG</li>
        </form>
    </ul>
</div>

Andriy F. · Accepted Answer · 2014-12-09 17:57:51Z

0

You have missed semicolon after total = 0 and HTML is invalid. Have look at this

edited Dec 9, 2014 at 17:57

answered Dec 9, 2014 at 17:34

Andriy F.

2,5451 gold badge26 silver badges23 bronze badges

2 Comments

Andriy F. Over a year ago

Yes, it's code that OP posted ). Without proper HTML this is going nowhere

benomatis Over a year ago

i agree the OP's code is a mess, but your answer doesn't answer their question, so it should probably be a comment instead...

pears456 · Accepted Answer · 2014-12-09 18:05:02Z

0

You could probably use JavaScript for this, have some sort of script to hide the menu and then when the user clicks on your logo use onclick to call a function to show your div. Your code doesn't help much, and I'm still very confused as to what is not working.

Take a look at this here

edited Dec 9, 2014 at 18:05

answered Dec 9, 2014 at 17:32

pears456

131 silver badge6 bronze badges

1 Comment

benomatis Over a year ago

the OP is already IS using JavaScript, so this answer isn't of a lot of help, to be honest... have you had a look at their script?

Collectives™ on Stack Overflow

Dropdown menu java script

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related