我正在尝试创建一个基本的登录页面。人们输入用户名和密码。它将检查数据库。如果他们可以验证他们的凭据，他们可以前进到不同的页面。如果没有，它将显示一条错误消息。这是我遇到问题的行:
else {
// Print login failure message to the user and link them back to your login page
echo '<script>document.getElementById("error").innerHTML = "Invalid username or password." </script>';
}
当我将引号之间的所有内容(当然，省略脚本标签)直接粘贴到控制台时，一切正常。但是，每当我尝试通过我的 PHP 文件回显它时，什么也没有发生。任何帮助将不胜感激。
完整文件如下:
<?php
session_start(); // Can't forget to start a session!
//Connect to the database
include_once "connect/connect_to_mysql.php";
if ($_POST['username'] || ($_POST['password'])) {
$username = ($_POST['username']);
$password = ($_POST['password']);
// $password = preg_match("[^A-Za-z0-9]", "", $_POST['password']); // only numbers and letters
// $password = md5($password); // Hash the password for security!
// Query the database and then convert all database data into variables.
$sql = mysql_query("SELECT * FROM Users WHERE username='$username' AND password='$password' AND activated='1'");
$login_check = mysql_num_rows($sql);
if($login_check > 0){
while($row = mysql_fetch_array($sql)){
// Get member ID into a session variable
$id = $row["id"];
//session_register('id');
$_SESSION['id'] = $id;
// Get member username into a session variable
$username = $row["username"];
// Get username into a session variable
$_SESSION['username'] = $username;
// Update the 'lastlogin' field to current date/time
mysql_query("UPDATE Users SET lastlogin=now() WHERE id='$id'");
// If successful, redirect to profile
header("location: main.php");
exit();
}
} else {
// Print login failure message to the user and link them back to your login page
echo '<script>document.getElementById("error").innerHTML = "Invalid username or password."</script>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Timeclock Login</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>
<div class="largetext">
Timeclock<span style="font-weight:300;">Login</span>
</div>
<div class="loginbox">
<form action="index.php" method="post" enctype="multipart/form-data" name="login" id="login">
<div id="error"></div>
<label><input type="text" name="username" placeholder="Username"></label>
<label><input type="password" name="password" placeholder="Password"></label>
<input type="submit" name="Login" class="loginbutton" value="Log in"></input>
</form>
</div>
</body>
</html>
最佳答案
您遇到的问题与 DOM 渲染有关。当你echo正在 <script>标记到浏览器，浏览器尚未完全呈现 Document Object Model .所以，正在发生的是对 document.getElementById("error") 的调用。没有重新调整任何结果，因此调用 .innerHtml一事无成。
您需要做的是推迟对 document.getElementById("error") 的调用直到 DOM 可用之后。在常见的 JavaScript 库中，如 jQuery , 一个 utility method to defer parsing of JavaScript提供:
$(document).ready(function() {
document.getElementById("error").innerHTML = "Invalid username or password.
});
这can be done in vanilla JavaScript也。如果您不关心 IE8 或更早的版本:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("error").innerHTML = "Invalid username or password.
});
关于JavaScript 在控制台中有效，但在我的页面上无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27118567/