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>

• Jonathan M: What does "not working" mean? What behavior is it exhibiting?
• MysteryX: 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
• Andriy F.: What part of this html is (should be) "dropdown"?

Answer 1

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

A couple of things:

1. 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).

2. 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).

3. Replace document.getElementById('togglemenu').onclick = navigate; with document.getElementById('togglemenu').onclick = function() { navigate() };

4. 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>

Answer 2

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

• Andriy F.: Yes, it's code that OP posted ). Without proper HTML this is going nowhere
• benomatis: 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...

Answer 3

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

• benomatis: 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?