Question

我正在尝试在网页中创建一个简单的日志。但是我的页面没有像我期望的那样呈现。

这是我的代码：

*.swp

function logIn(username, password){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if(username == "a" && password == "a"){
        window.location.href="awesomePage.html";
    }else{
        alert("Incorrect username or password!");
    }
}

#user {
    position: absolute;
    top: 10px;
    left: 5px;
}
#pass {
    position: absolute;
    top: 40px;
    left: 7.5px;
}
#username {
    position: absolute;
    top: 5px;
    left: 40px;
}
#password {
    position: absolute;
    top: 20px;
    left: 40px;
}
#logIn {
    position: absolute;
    top: 75px;
    left: 80px;
}

之前，当我为用户名输入 a 而密码 a 时，我点击了登录，我收到了提示消息：用户名或密码不正确。

我尝试将HTML更改为（其他代码保持不变）：

<form action="javascript:logIn(username, password);" method="post">
  <div id="user"> Username: </div>
  <div id="username"> 
    <input type="text" id="username" placeholder="Enter username here." /> 
  </div>
  <div id="pass"> Password: </div>
  <div id="password"> 
    <input type="password" id="password" placeholder="Enter password here." /> 
  </div>
  <div id="logIn"> 
    <input type="button" value="Log In" onClick="javascript:logIn(username, password);"/> 
  </div>
</form>

因此将CSS更改为（其他代码保持不变）：

<div id="un"> <input type="text" id="username" placeholder="Enter username here." /> </div>
<div id="pw"> <input type="password" id="password" placeholder="Enter password here." /> </div>

当我输入用户名 a 而密码 a 时，我需要 awesomePage.html ，但输入字段位于我的位置不希望他们成为。

我的问题是：如何解决此问题？

另外，另一个小问题：我应该命名我拥有的其他网页： awesomePage.html 或 awesome_page.html ，或 Awesome Page.html 好吗？

Answer 1

只需用最少的代码更改来解决您的问题：
我刚刚对CSS进行了一些小改动，并对html ID进行了另一个小改动，这使得所有内容看起来都相同且功能正常。
当然，你可以通过不依赖于前面列出的答案的位置来改善这一点。

＆＃13;

function logIn(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    debugger;
    if(username == "a" && password == "a"){
        window.location.href="awesomePage.html";
    }else{
        alert("Incorrect username or password!");
    }
}

＆＃13;

#user {
    position: absolute;
    top: 10px;
    left: 5px;
}
#pass {
    position: absolute;
    top: 40px;
    left: 7.5px;
}
#username-ctr, #username {
    position: absolute;
    top: 5px;
    left: 40px;
}
#password-ctr, #password {
    position: absolute;
    top: 20px;
    left: 40px;
}
#logIn {
    position: absolute;
    top: 75px;
    left: 80px;
}

＆＃13;

<form action="javascript:logIn(username, password);" method="post">
  <div id="user"> Username: </div>
  <div id="username-ctr"> 
    <input type="text" id="username" placeholder="Enter username here." /> 
  </div>
  <div id="pass"> Password: </div>
  <div id="password-ctr"> 
    <input type="password" id="password" placeholder="Enter password here." /> 
  </div>
  <div id="logIn"> 
    <input type="button" value="Log In" onClick="logIn()"/> 
  </div>
</form>

＆＃13;

回答你的第二个问题：
这取决于很多因素，但如果您使用google＆＃34;网站页面命名约定＆＃34;您可以找到许多SEO建议和最佳做法，我的建议：
- 不要在页面名称中使用空格 - 不要使用_，因为我知道有些搜索引擎将此视为普通字符而不是分隔符，请使用 - 而不是。 - 与所有其他网站页面命名约定保持一致，以获得更好的用户体验。

Answer 2

正如评论所说，这不是一个真正的登录，但如果你想使用它，你的问题是你在＆＃34; div＆＃34;上使用了重复的ID。和＆＃34;输入＆＃34;。将它们更改为#un和#pw后，您还需要更新您的css：

   #username, #un {
    position: absolute;
    top: 5px;
    left: 40px;
   }
   #password, #pw {
    position: absolute;
    top: 20px;
    left: 40px;
   }

Answer 3

只需更改您的JavaScript代码：

＆＃13;

<script type="text/javascript">

function logIn(){
  
    var username = document.querySelector("input[id='username']").value;
    var password = document.querySelector("input[id='password']").value;
  
    if(username == "a" && password == "a"){
        window.location.href="awesomePage.html";
    }else{
        alert("Incorrect username or password!");
    }
}

</script>

＆＃13;

Answer 4

我想再次迭代，请不要写这样的生产代码，因为这不是真正的登录，没有任何东西阻止任何人检查您的页面来源，然后他们就能看到你的用户名和密码是。

要修复布局问题，您需要将子元素和父元素都添加到CSS样式中，因为您使用的是绝对定位

#un, #username {
    position: absolute;
    top: 5px;
    left: 40px;
}
#pw, #password {
    position: absolute;
    top: 20px;
    left: 40px;
}

我还想解释您的初始代码出了什么问题，因为它可能会帮助其他人理解您更改元素ID的原因。

首先在您的JavaScript函数中，您需要用户名和密码的参数，但是在您的代码示例中没有使用它们使它们完全冗余，并且您可以从函数定义中删除它们，您正在使用document.getElementById无论如何都要获得用户名和密码。

当您运行代码并记录用户名和密码值的输出时，您会注意到它们都返回为undefined。这样做的原因是你的HTML源代码中有重复的id值，所以它实际上是试图从另一个元素中获取值（在这种情况下，它识别父div元素而不是输入元素）。

  <div id="username"> 
    <input type="text" id="username" placeholder="Enter username here." /> 
  </div>

对此的修复是通过将输入ID更改为＆＃34; username_input＆＃34;来确保您的ID值是唯一的。或者父母的身份证号为＆＃34; username_container＆＃34;然后更改您的函数以考虑修改后的id值。

接下来的问题，在你的HTML代码中，你在表单中调用了两次函数，虽然这不会在这里引起问题，但是一旦你开始执行异步请求，可能会出现重复请求等问题。 / p>

<form action="javascript:logIn(username, password);" method="post">

（实际上没有调用，因为你的表单中没有其他地方的提交按钮）

和

<input type="button" value="Log In" onClick="javascript:logIn(username, password);"/>

您不需要在表单元素中使用操作或方法，因此您可以选择其中一个。

所以这是一个CodePen链接，修改后的代码在其中进行了修改： http://codepen.io/anon/pen/LbxOOP

并回答你的其他问题。在命名将直接从浏览器调用的HTML页面时，总是更喜欢使用snake case（即awesome_page.html）或连字符（awesome-page.html）。原因是在某些设置中，操作系统在查找文件时可能不区分大小写，因此如果您有awesomePage.html和awesomepage.html，那么它将实际返回的文件将是不可预测的。切勿在文件名中使用空格。

登录网页 - ＆gt; <div>并比较用户输入

4 个答案: