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

我试图创建一个基本的登录页面。人们输入用户名和密码。它将检查数据库。如果他们可以验证他们的凭证，他们可以前进到不同的页面。如果不是，则会显示一条错误消息。下面是我有问题行：JavaScript在控制台中工作，但不在我的页面上

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>

来源

2014-11-25 Bryce Matheson

在渲染到页面之前，您无法引用元素。 – epascarello 2014-11-25 03:58:28

如果您需要客户端代码或标记方面的帮助，请发布客户端获取的内容（例如show source），而不是生成它的服务器代码。 – RobG 2014-11-25 03:58:49

你能改变回应'';并看看它是否有效 – Satya 2014-11-25 03:58:55

，您有有关DOM渲染的问题。当您的标记<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. 
});

来源

2014-11-25 04:06:39

非常感谢你，本！我非常感谢帮助。我们只是说JavaScript不是我的强项之一。 ;）我需要更多地使用JQuery。你的脚本适合我。万分感谢！ – 2014-11-25 04:14:37

-1

<?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>

试试上面。通过这个元素将在脚本执行之前被加载。

来源

2014-11-25 04:06:58 Rajesh

仅仅因为您向浏览器输出HTML并不意味着DOM已准备就绪。 – 2014-11-25 04:09:13

加载'＃error' div后，会发生登录失败脚本本身的解析。 – Rajesh 2014-11-25 04:10:57

哦，好吧。你可以检查你的控制台，并请给我建议。 http://plnkr.co/edit/5zm9k6Alfvb1b78lF6ei – Rajesh 2014-11-25 04:27:22

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

回答

相关问题