-1

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>

2 Answers 2

0

change signup.style.top = pos + 'px' to signin.style.top = pos + 'px';

1
  • I figured it out. I had to assign a set interval function to id in order to make this work correctly. but you where a good step in solving this issue. Thanx to you and to all.
    – chree
    Feb 15, 2017 at 20:01
0

Change Parameter name from signin to signup. You are trying to use the variable signin which is not defined in the frame function, neither is the variable signin a global variable. So the variable signup is undefined and hence you are getting the error

"Cannot read property 'style' of undefined at frame"

function frame(signin, pos, id)

to

function frame(signup, pos, id)

function frame(signup, pos, id) 
{
    if (pos == 0) {
    clearInterval(id);
    } else {
        pos--; 
        signup.style.top = pos + 'px'; 
    }
}
1
  • Please do not forget to mark answer as helpful Feb 15, 2017 at 20:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.