What am I doing wrong here?
var icon = documment.getElementById("loginIcon");
var content = documment.getElementById("loginField");
icon.onclick = function() {
if (content.style.visibility==="visible") {
content.style.visibility="hidden";
}
else {
content.style.visibility="visible";
}
}
"loginIcon" is an ID I've assigned to a PNG (I put the ID in a div) I made in photoshop. It's displaying fine, and I was even able to animate it, but I can't get it to trigger these events (show/hide).
"loginField" is another ID I've assigned to a div containing everything in a login popup (email, password, etc).
I'm not sure if I'm just missing knowledge as I'm a noob with all of this.
Thanks!
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Learning to Code</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<!-- All header code -->
<div id="header">
<div id="loginIcon">
<img src="LoginIconWhiteForUpload.png" alt="login icon">
</div>
<div id="loginField" alt="login section">
<input type="blank" placeholder="username">
<br>
<input type="password" placeholder="password">
<center><button type="button" name="button">Log In</button><center>
<br>
Don't have an account?
<br>
<a href="register.html" alt="registration page">Register Now!</a>
</div>
<div id="headerLogo">
<img src="OchoRiosLogoEditedCloud.png" alt="Ocho Rios Logo">
</div>
</div>
<!-- All navication menu code -->
<div id="menu">
<a href="index.html" alt="homepage page link" class="menu,
menuspacing">HOME</a>
<a href="menu.html" alt="menu page link" class="menu, menuspacing">MENU</a>
<a href="about.html" alt="about page link" class="menu, m
menuspacing">ABOUT</a>
<a href="contact.html" alt="contact page link" class="menu, m
menuspacing">CONTACT</a>
</div>
<!-- Main content of the webpage -->
<div class="websiteSection">
<h1>Welcome to Ocho Rios!</h1>
<p>We are so happy you've come to check out our website! We've tried our best
to put together something presentable.</p>
</div>
<div class="websiteSection">
<h1>Contact us:</h1>
<p> - social media, contact form, etc.
</div>
<div id="footer">
Copywrite © 2020, Ocho Rios Authentic Carribean Cuisine, Calgary, Alberta,
Canada.
<script type="text/jscript" src="javascript.js"></script>
</body>
</html>
