Question

所以我在这里遇到的问题是 function frame（）不会在函数内调用HideLogin（）我在控制台中收到错误：

无法在帧（page1.js：46）

读取未定义的属性'style'

我确定可以看到我已经在HideLogin中定义了函数，然后我继续将其作为参数发送。该功能应该通过动画onclick移动注册文本。当我将整个框架功能放在HideLogin中时，这很好用。但出于某种原因，我不能像我想的那样调用它。如何在HideLogin中调用框架？ Thanx提前

的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>

Answer 1

将参数名称从signin更改为signup。您正在尝试使用signin函数中未定义的变量frame，变量signin也不是全局变量。因此变量signup未定义，因此您收到错误

＆＃34;无法读取属性＆＃39; style＆＃39;未定义的框架＆＃34;

function frame(signin, pos, id)

到

function frame(signup, pos, id)

function frame(signup, pos, id) 
{
    if (pos == 0) {
    clearInterval(id);
    } else {
        pos--; 
        signup.style.top = pos + 'px'; 
    }
}

Answer 2

将signup.style.top = pos + 'px'更改为signin.style.top = pos + 'px';

无法调用内部的动画功能和onclick功能

2 个答案: