2017-02-13 145 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