登录不起作用？

Question

尊敬的Stackoverflowers，

对于学校我正在做一个简单的社交媒体网站，我需要证明你可以登录。我不是那种Javascript的经验，所以我试图结合我的知识和信息我可以在youtube和w3school找到，并与此同时。只有当我按登录按钮时，它没有做任何事情（据我所知）。

PS：我知道这个网站实在是太丑了，但它是关于某些特定功能工作：3

var count= 2; 
 
    
 
function validate(){ 
 
    
 
    var username = document.login.username.value; 
 
    var password = document.login.password.value; 
 
    var valid= false; 
 
    var usernameArray = ["Gdp", "Hekman", "Koning", "ErikHekman", "ThijsWaardenburg", "Ronald", "RonaldVanEssen" ]; 
 
    var passwordArray = ["Gdp123", "Hekman123", "Koning123", "ErikHekman123", "ThijsWaardenburg123", "Ronald123", "RonaldVanEssen123"]; 
 
    
 
    for (var i = 0; i < usernameArray.length; i++) 
 
    
 
{ 
 
    
 
    if ((username == usernameArray[i]) && (password == passwordArray[i])) 
 
    { 
 
     valid = true; 
 
     break; 
 
    } 
 
} 
 
    
 
    if (valid) 
 
    { 
 
     alert("Log in was succesfull!") 
 
     window.location = "timeline"; 
 
     return false; 
 
    } 
 
    var again = "tries"; 
 
    if (count ==1) 
 
    { 
 
     again = "try" 
 
    } 
 
    if (count >= 1) 
 
    { 
 
     alert("Wrong password or username") 
 
     count--; 
 
    } 
 
    else 
 
    { 
 
     alert("Too many attempts"); 
 
     document.login.username.value = "You are now blocked"; 
 
     document.login.pass.value = "You are now blocked"; 
 
     document.login.username.disabled = true; 
 
     document.login.password.disabled = true; 
 
     return false; 
 
    } 
 
}

html {font-family:Arial, Helvetica, sans-serif; color:#333;} 
 
body { background:#CCC; margin:0; } 
 
#container { width:900px; margin:0 auto; background:#FFF; } 
 
#header { width:100%; height:60px; border-bottom:1px solid #c7c7c7; background:#3f0b04; text-align:center; } 
 
#header h1 {color:#e7c321; } 
 
    
 
#logo { float:left; width:40px; height:40px; margin:10px; background:#CCC;} 
 
#navbar { height:36px; clear:both; background-color:#e7c321; } 
 
#navbar ul { margin:0; padding:0; list-style-type:none; } 
 
#navbar ul li { padding:10px; float:left; } 
 
#navbar ul li a { font size:12px; float:left; padding:0 0 0 20px; display:block; } 
 
#banner { background:#3f0b04; heigth:120px; clear:both; padding:20px; text-align:center; color:#FFF; margin:10px 0 2px 0;} 
 
#middle-column { float:left; width:858px; height:500px; border:1px solid #333; color:#000; background:#bcbab4; padding:20px; text-align:center; } 
 
#login-logo {width:100%; ; height:200px; float:center;} 
 
#login-form {float:center; width:175px; } 
 
#submit {width:170px; float:center;} 
 
#register {width:170px; float:center;} 
 
    
 
#footer { padding:20px; clear:both; color:#FFF; background-color:#3f0b04; text-align:center; }

<div id="container"> 
 
    <!-- HEADER --> 
 
    <div id="header"> 
 
     <div id="logo"><img src="http://imgur.com/578H3e8.png"></img></div> 
 
     <h1>BroCialize</h1> 
 
     <div id="navbar"> 
 
      <ul> 
 
       <li><a href="url"></a></li> 
 
       <li><a href="url"></a></li> 
 
       <li><a href="url"></a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <!-- CONTENT AREA --> 
 
    <div id="content-area"> 
 
     <div id="banner">This site is Legen...wait for it...Dary</div> 
 
     <div id="middle-column"> 
 
      <div id="login-logo"><img src="http://imgur.com/uelX4ie.png></img></div> 
 
      <div id="login-form"> 
 
       <form method="POST"> 
 
        <input type="text" name="username" placeholder="username" /> 
 
        <br> 
 
        <input type="password" name="password" placeholder="password" /> 
 
        <br> 
 
       </form> 
 
       <button id="submit">Log in</button> 
 
       <br> 
 
       <button id="register">Register</button> 
 
      </div> 
 
    
 
     </div> 
 
    </div> 
 
    <!--FOOTER --> 
 
    <div id="footer">Copyright by BroCialize - 2016</div> 
 
</div> <!-- END CONTAINER -->

很抱歉，如果我问的新手问题，我只是期待寻求一些帮助。 由于提前，

-iWnB

Answer 1

正如我看到的，“document.login.username”不会被发现，因为在网站上没有“登录”命名的形式。所以该函数将不会找到检查用户名值的位置。

Answer 2

至少现在你在你的代码中有两个主要问题。

首先在您使用的JS部分document.login...，而没有HTML元素id="login"（可能是您的<form>）。
因此，目前您尝试使用不存在的元素。

在另一方面，直接关系到你的问题

当我按下登录按钮，它没有做任何事情

1. 在任何情况下，当你按下按钮时，表单它很容易被提交。这意味着表单的action属性中指定的url被调用。
2. 但由于您没有指定任何action属性，所以默认情况下是再次调用当前页面。
   所以是的，你什么都看不到......但是如果你仔细看看它，你会发现你的浏览器的标签快速显示它的等待轮，以证明它调用了一个页面。

在＃1之后，您可能需要编写一个专门的PHP脚本（或将其包含在当前页面中）以响应表单提交。
但是在目前的情况下，你想要的只是对按钮做出反应，以便执行你的validate()函数。
为了实现这一目标，主要有2个方面：

1. 旧的方式：添加一个onclick属性为<button>元素。现在不推荐这么做，所以我甚至不会告诉你如何去做。

2. 现代时尚，这是一个事件监听器连接到你的按钮，像这样：

   document.onload = function() { document.getElementById('submit').addEventListener('click', validate); }

这段代码必须添加到您的JS部分，之前或之后的validate()函数。