2017-02-13 89 views
-1

所以我有这里的问题是,功能框()不会里面功能HideLogin()我越来越控制台错误拨打:不能调用里面的动画功能和的onclick功能

无法读取属性'风格'未定义在框架(page1.js:46)

哪个确定可以看到我已经在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> 

回答

0

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

+0

我明白了。我必须将一个设置的间隔函数分配给id以使其正确工作。但你在解决这个问题方面迈出了一大步。感谢你和所有。 – chree

0

更改参数名称从signinsignup。您正尝试使用frame函数中未定义的变量signin,变量signin也不是全局变量。所以变量signup是不确定的,因此,你所得到的错误

“无法读取性能在帧的不确定的 '风格'”

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'; 
    } 
} 
+0

谢谢你的帮助。 – chree

+0

请不要忘记标记答案有帮助 – Agalo