Question

我正在尝试创建一个基本的登录页面。人们输入用户名和密码。它将检查数据库。如果他们可以验证他们的凭据，他们可以前进到不同的页面。如果没有，它将显示错误消息。这是我遇到问题的路线：

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>

Answer 1

您遇到的问题与DOM呈现有关。当您echo将<script>标记添加到浏览器时，浏览器尚未完全呈现Document Object Model。所以，正在发生的事情是对document.getElementById("error")的调用并未重新调整任何结果，因此对.innerHtml的调用无效。

您需要做的是将调用推迟到document.getElementById("error")，直到DOM可用。在jQuery等常见JavaScript库中，提供了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或earler：

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("error").innerHTML = "Invalid username or password.
});

Answer 2

<?php
session_start(); // Can't forget to start a session!

//Connect to the database
include_once "connect/connect_to_mysql.php";
?>
<!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>
<?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>';
}
}
?>


</body>
</html>

尝试以上方法。这样，元素将在脚本执行之前加载。

JavaScript在控制台中工作，但不在我的页面上

2 个答案: