-1

我正在尝试使用 html、css 和 javascript 制作登录表单，并且它可以正常工作。但问题是，它没有显示我的 html 内容，它只在其他页面上显示用户名。谁能帮帮我吗？我希望 target.html 页面显示我的 html 内容以及用户名。

索引.html

 <html> 
  <head>
  <title>Login page</title>
  </head>
   <body>
    <h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
      color:#00FF00;>
     Simple Login Page
    </h1>
    <form name="myform">
    Username<input type="text" name="userid" id="userid"/>
    Password<input type="password" name="pswrd"/>
    <input type="button" onclick="check(this.form)" value="Login"/>
    <input type="reset" value="Reset"/>
     </form>

      <script language="javascript">

     function check(form)
     {

     if(form.userid.value && form.pswrd.value)
     {
      window.location="target.html"
   alert("Welcome to this page")
   var userid = document.getElementById("userid").value;
    localStorage.setItem("userid", userid);
      }
     else
      {

     alert("Error Password or Username")
    }
   }
  </script>
  </body>
  </html>

目标.html

 <html>
 <head>
 <title>Login page</title>
 <style>
 h1.text{
 color: red;
 }
 </style>
 <script>
 function init(){
 var userid = localStorage.getItem("userid");

document.write("Welcome "+userid);
}
  window.onload=init;
</script>

 <body>
<h1 class="text">Simple Login Page</h1> 
<a href="confirm.html">Confirm.html</a>

</body>
</html>
4

2 回答 2

0

在 onload 中使用document.write会导致内容被擦除。

document.write通常被认为是坏的，所以不要使用它。

更多关于document.write

于 2013-09-22T14:39:24.577 回答
0

document.write 写入页面并覆盖任何现有的 html。您正在尝试将某些内容附加到页面上。这意味着您可以放入一个占位符，然后用您的数据填充它。此外，在您的 index.html 页面上，您还有很多无法执行的代码，因为您已经更改了位置。最重要的是 localStorage.setItem("userid", userid); 它需要移动到您的位置重置之上，您的 target.html 才能工作。

 <html>
 <head>
 <title>Login page</title>
 <style>
 h1.text{
 color: red;
 }
 </style>
 <script>
 function init(){
 var userid = localStorage.getItem("userid");

document.getElementById("username").innerHTML("Welcome "+userid);
}
  window.onload=init;
</script>

 <body>
<span id='username'></span>
<h1 class="text">Simple Login Page</h1> 
<a href="confirm.html">Confirm.html</a>

</body>
</html>
于 2013-09-22T14:54:20.470 回答