Lucas Ouwens Lucas Ouwens - 2 months ago 6
HTML Question

Javascript function does not show the div after clicking on a href without JQuery

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!

Answer

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

Comments