Javascript function does not show the div after clicking on a href without JQuery
Question
I've been working on a small website for school and i want to add a button that'll make a 'login' div pop up out of thin air, i've already written the HTML/CSS for it but i haven't got too much experience in Javascript, that's why i am hoping for a possible answer here, i'm writing an open() function to open the div, and if it gets activated again it should close.
var open = false; function open() { open == false ? document.getElementById('login').style.display = 'block' : document.getElementById('login').style.display = 'none'; open = !open; console.log(open); }
* { margin: 0; padding: 0; min-width: 1px; min-height: 1px; } html,body { width: 100%; height: 115%; overflow-x: hidden; background-image: url('../img/bg.jpg'); } header { margin-top: 2%; background-color: #FF0000; margin-left: 12.1%; width: 75%; height: 180px; } header p { font-size: 64px; margin-left: 40%; padding-top: 4.5%; } #nav { margin-left: 12.1%; width: 75%; height: 50px; background-color: #FF0000; border-bottom: 1px solid #FFFFFF; } #nav ul li a { display: inline-block; text-align: center; padding: 11px 14px; text-decoration: none; font-size: 24px; } #content { margin-left: 12.1%; width: 75%; height: 73.9%; background-color: #FF0000; } footer { text-align: center; background-color: #FF9900; width: 75%; margin-left: 12.1%; } #nav #right { float: right; } #nav ul { list-style-type: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid #FFFFFF; } #nav ul li { float: left; } #nav ul a:hover { transition: 0.5s; background-color: #FFFF0F; } #login { display: none; float: right; margin-top: 2%; margin-right: 5%; width: 25%; height: 20%; background-color: #FFFFFF; } #login form { margin-left: 15%; margin-top: 8%; }
<!DOCTYPE html> <html> <head> <title>Website</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="js/LoginMenu.js"></script> </head> <body> <header><p> Lost Story </p></header> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Register</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Donate</a></li> <li><a href="#">Vote</a></li> <div id="right"> <li><a href="#" onclick="open()">Log in/register</a></li> </div> </ul> </div> <div id="content"> <div id="login"> <form> <p> username: </p> <input type="text" name="firstname"> <p> password </p> <input type="password" name="pass"> </form> </div> </div> <footer> Website made by a rock </footer> </body> </html>
I'm still looking for an answer, last time no one tried to answer my question about javascript i hope this time it'll work out.
Thanks!
3 answers
solution1
0 2016-09-30 12:16:04
actually you don't necessarily need javascript to work with dialogs. I did a JSFiddle for you : https://jsfiddle.net/69fjnnx9/
You can see that with the :target CSS pseudo-class you can play on the display property of your login div, along with setting your link in the menu to #login , ie the div you want to target.
Then, I added a 'Close' button in your login div which points to '#' and makes the login div disappear by loosing target when clicked.
Hope this helps !
solution2
0 ACCPTED 2016-09-30 12:16:16
The problem is that open() points to window.open() on the global scope.
So rename your function to loginOpen()
Also your HTML is not valid. An UL can only have LI and OL as children. You have a DIV . https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
solution3
0 2016-09-30 12:29:28
<a href="#" onclick="open()">Log in/register</a>
Calls
window.open()
instead of the expected open() function you had created. See https://developer.mozilla.org/en-US/docs/Web/API/Window/open and try to avoid property names already used by the global Window object.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.