2017-02-13 2 views
-1

Also das Problem, das ich hier habe nennen ist, dass Funktionsrahmen() nicht innerhalb Funktion HideLogin nennen() ich einen Fehler in der Konsole bin immer:Kann nicht Animationsfunktion innerhalb und Onclick Funktion

Can not Lese Eigenschaft 'style' von undefined bei frame (page1.js: 46)

Welche ich sicher sehen kann, dass ich die Funktion in HideLogin definiert habe, in dem ich dann fortfahre, es als Argument zu senden. Die Funktion soll den Sign Up Text mit einem Klick auf die Animation bewegen. Dies funktioniert gut, wenn ich die gesamte Frame-Funktion in HideLogin einfüge. aber aus irgendeinem Grund kann ich mich nicht darauf berufen, wie ich es auch möchte. Wie kann ich Frame innerhalb von HideLogin aufrufen? Danke im Voraus

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> 

Antwort

0

Änderung signup.style.top = pos + 'px' zu signin.style.top = pos + 'px';

+0

Ich habe es herausgefunden. Ich musste der ID eine set interval Funktion zuweisen, damit dies richtig funktioniert. aber Sie waren ein guter Schritt in der Lösung dieses Problems. Danke an Sie und an alle. – chree

0

ändern Parametername von signin zu signup. Sie versuchen, die Variable signin zu verwenden, die nicht in der frame-Funktion definiert ist, und die Variable signin ist keine globale Variable. So wird die Variable signup ist nicht definiert und daher sind Sie immer den Fehler

"Can not Eigenschaft 'Stil' undefinierter bei Frame lesen"

function frame(signin, pos, id)

zu

function frame(signup, pos, id)

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

Vielen Dank für die Hilfe. – chree

+0

Bitte vergessen Sie nicht, die Antwort als hilfreich zu markieren – Agalo

Verwandte Themen