So the problem I am having here is that function frame() will not call inside function HideLogin() I am getting an error in the console:
Cannot read property 'style' of undefined at frame (page1.js:46)
Which im sure one can see that i have defined the function in HideLogin inwhich then i proceed to send it as an argument. The function is supposed to move Sign Up text up with an animation onclick. This works fine when I put the whole frame function inside HideLogin. but for some reason I cannot invoke it as I would like too. How can I call frame inside of HideLogin? Thanx in advance
Javascript
function HideLogin()
{
var login = document.getElementById("login");
var SignUpSheet = document.getElementById("SignUpSheet");
var titlecard = document.getElementById("titlecard");
var signup = document.getElementById("signup");
var pos = 125;
var id = setInterval(frame, 1);
login.style.display = "none";
SignUpSheet.style.display = "block";
titlecard.style.display = "block";
frame(signup, pos, id);
}
function frame(signin, pos, id)
{
if (pos == 0) {
clearInterval(id);
} else {
pos--;
signup.style.top = pos + 'px';
}
}
CSS
#signup /* sign up link */
{
position: absolute;
cursor: pointer;
display: block;
//border: 2px solid white;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
top: 125px;
font-family: papyrus;
font-size: 70px;
color: red;
text-shadow: 2px 2px black;
transition: text-shadow 0.5s ease;
}
#signup:hover
{
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 4px 4px black;
}
HTML
<!doctype html>
<html>
<head>
<title>The Prime Legion</title>
<link rel="stylesheet" type="text/css" href="page1.css">
<script type="text/javascript" src="page1.js"></script>
</head>
<body>
<div id="logBox">
<div id="login" onclick="HideSignin()">
Log In
</div>
<div id="signup" onclick="HideLogin()">
Sign Up
</div>
</div>
<div id="LogInSheet">
<div id="LoginTitle">
<p><h4>Hello</h4></p>
</div>
</div>
<div id="SignUpSheet">
<div id="SignupTitle">
<p><h4>Welcome</h4></p>
</div>
</div>
<div id="titlecard">
<p><h1>The Prime Legion</h1></p>
</div>
</body>
</html>