Question

你好，我做了一个编码的和平，但当我进入登录表单并键入的东西，然后我回到索引，然后我回到登录，文本仍然存在：O请帮助我，我的代码是：

<!doctype html>
<html>
  <head>
    <style>

  .hidden {
    display: none;
  }
  .vsible {
    display: block;
  }
  body {
    border: 1px solid;
    border-radius: 22px;
    width: 92%;
    margin: 0 auto;
    padding: 10px 20px 10px 20px;
  }
  .headers {
    border-bottom: 1px solid;
    text-align: center;
  }
  .nav {
    padding: 10px 20px 10px 20px;
    border-bottom: 1px solid;
  }
    .btn {
      background: #97cbed;
      background-image: -webkit-linear-gradient(top, #97cbed, #0b5b8a);
      background-image: -moz-linear-gradient(top, #97cbed, #0b5b8a);
      background-image: -ms-linear-gradient(top, #97cbed, #0b5b8a);
      background-image: -o-linear-gradient(top, #97cbed, #0b5b8a);
      background-image: linear-gradient(to bottom, #97cbed, #0b5b8a);
      -webkit-border-radius: 60;
      -moz-border-radius: 60;
      font-family: Arial;
      color: #ffffff;
      font-size: 15px;
      border: solid #1f628d 0px;
      text-decoration: none;
      width: 33.3333333333%;
      height: 50px; 
    }
      .btn:hover {
        background: #083c5c;
        background-image: -webkit-linear-gradient(top, #083c5c, #83bee6);
        background-image: -moz-linear-gradient(top, #083c5c, #83bee6);
        background-image: -ms-linear-gradient(top, #083c5c, #83bee6);
        background-image: -o-linear-gradient(top, #083c5c, #83bee6);
        background-image: linear-gradient(to bottom, #083c5c, #83bee6);
        text-decoration: none;
      }

      #LoginDiv {
        width: 25%;
        margin: 0 auto;
        border: 1px solid;
        border-radius: 22px;
        padding: 10px 20px 10px 20px;
      }
      #RegisterDiv {
        width: 35%;
        margin: 0 auto;
        border: 1px solid;
        border-radius: 22px;
        padding: 10px 20px 10px 20px;
      }

 </style>

</head>

<body>


<div class="headers">

  <div id="IndexDivHeader" class="visible">
    <h1>Index</h1>
  </div>

  <div id="LoginDivHeader" class="hidden">
    <h1>Login form</h1>
  </div>

  <div id="RegisterDivHeader" class="hidden">
    <h1>Register form</h1>
  </div>

</div>

<div class="nav">

  <button class="btn" id="IndexBtn">Index</button><button class="btn" id="LoginBtn">Login</button><button class="btn" id="RegisterBtn">Register</button>

</div>

<div class="visible" id="IndexDiv">
  <h2>Welcome to this page</h2><p>Mycoolwebsite is a awsome site where you can do bullshit and drugs</p>
</div>
<br>
<div class="hidden" id="LoginDiv">
  <div class="visible" id="LoginForm">
    <center><h2>Login here</h2></center>

    <table>
      <tr>
        <td>Username: </td>
        <td><input type="txt" style="border-radius:10px; border-color:blue; width:300px;height:30px;padding:10px 20px 10px 20px;"></td>
      </tr>
      <tr>
        <td>Password: </td>
        <td><input type="password" style="border-radius:10px; border-color:blue; width:300px;height:30px;padding:10px 20px 10px 20px;"></td>
      </tr>
      <tr><td></td><td><button id="submittedLogin">Login</button></td></tr>
    </table>
  </div>

  <div id="SucLogin" class="hidden">

    <center><h1>You succesfully logged in!</h1><button id="ToIndexFromLogin">Go to home</button></center>

  </div>

</div>

<div class="hidden" id="RegisterDiv">

  <div class="visible" id="RegisterForm">
    <left><h2 style="width:142px;border:1px solid;padding:1px 1px 1px 1px;">Register form</h2></left>
    <table>
      <tr>
        <td>Username: </td>
        <td><input type="txt" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
        <td>Real name: </td>
        <td><input type="txt" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
      </tr>
      <tr>
        <td>Password: </td>
        <td><input type="Password" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
        <td>Phone number: </td>
        <td><input type="txt" value="If secret type SECRET" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
      </tr>
      <tr>
        <td>Email: </td>
        <td><input type="Email" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
        <td>Age: </td>
        <td><input type="Number" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
      </tr>
      <tr><td></td><td><button id="submittedRegister">Register</button></td></tr>
    </table>
  </div>
  <div class="hidden" id="SucRegister">
    <center><h1>You succesfully registered!</h1><button id="ToIndexFromRegister">Go to home</button></center>
  </div>
</div>

<script>

  var IndexDivHeader = document.getElementById('IndexDivHeader')
  var LoginDivHeader = document.getElementById('LoginDivHeader')
  var RegisterDivHeader = document.getElementById('RegisterDivHeader')

  var IndexBtn = document.getElementById('IndexBtn')
  var LoginBtn = document.getElementById('LoginBtn')
  var RegisterBtn = document.getElementById('RegisterBtn')
  var submittedLogin = document.getElementById('submittedLogin')
  var ToIndexFromLogin = document.getElementById('ToIndexFromLogin')
  var submittedRegister = document.getElementById('submittedRegister')
  var ToIndexFromRegister = document.getElementById('ToIndexFromRegister')

  var IndexDiv = document.getElementById('IndexDiv')
  var LoginDiv = document.getElementById('LoginDiv')
  var SucLogin = document.getElementById('SucLogin')
  var RegisterDiv = document.getElementById('RegisterDiv')
  var SucRegister = document.getElementById('SucRegister')

  var LoginForm = document.getElementById('LoginForm')

  IndexBtn.onclick = function () {
    IndexDivHeader.setAttribute('class', 'visible')
    IndexDiv.setAttribute('class', 'visible')
    LoginDivHeader.setAttribute('class', 'hidden')
    RegisterDivHeader.setAttribute('class', 'hidden')
    LoginDiv.setAttribute('class', 'hidden')
    SucLogin.setAttribute('class', 'hidden')
    RegisterDiv.setAttribute('class', 'hidden')
    SucRegister.setAttribute('class', 'hidden')
  }

  LoginBtn.onclick = function () {
    LoginDivHeader.setAttribute('class', 'visible')
    LoginDiv.setAttribute('class', 'visible')
    LoginForm.setAttribute('class', 'visible')
    IndexDivHeader.setAttribute('class', 'hidden')
    IndexDiv.setAttribute('class', 'hidden')
    RegisterDivHeader.setAttribute('class', 'hidden')
    RegisterDiv.setAttribute('class', 'hidden')
    SucLogin.setAttribute('class', 'hidden')
    SucRegister.setAttribute('class', 'hidden')
  }
    submittedLogin.onclick = function () {
      SucLogin.setAttribute('class', 'visible')
      LoginForm.setAttribute('class', 'hidden')
    }
      ToIndexFromLogin.onclick = function () {
        IndexDivHeader.setAttribute('class', 'visible')
        IndexDiv.setAttribute('class', 'visible')
        LoginDivHeader.setAttribute('class', 'hidden')
        RegisterDivHeader.setAttribute('class', 'hidden')
        LoginDiv.setAttribute('class', 'hidden')
        SucLogin.setAttribute('class', 'hidden')
        RegisterDiv.setAttribute('class', 'hidden')
        SucRegister.setAttribute('class', 'hidden')
        LoginForm.setAttribute('class', 'hidden')
        RegisterForm.setAttribute('class', 'hidden')
      }
  RegisterBtn.onclick = function () {
    IndexDivHeader.setAttribute('class', 'hidden')
    IndexDiv.setAttribute('class', 'hidden')
    LoginDivHeader.setAttribute('class', 'hidden')
    LoginDiv.setAttribute('class', 'hidden')
    LoginForm.setAttribute('class', 'hidden')
    SucLogin.setAttribute('class', 'hidden')
    SucRegister.setAttribute('class', 'hidden')
    RegisterDivHeader.setAttribute('class', 'visible')
    RegisterDiv.setAttribute('class', 'visible')
    RegisterForm.setAttribute('class', 'visible')
  }
  submittedRegister.onclick = function () {
    RegisterForm.setAttribute('class', 'hidden')
    SucRegister.setAttribute('class', 'visible')
  }
      ToIndexFromRegister.onclick = function () {
        IndexDivHeader.setAttribute('class', 'visible')
        IndexDiv.setAttribute('class', 'visible')
        LoginDivHeader.setAttribute('class', 'hidden')
        RegisterDivHeader.setAttribute('class', 'hidden')
        LoginDiv.setAttribute('class', 'hidden')
        SucLogin.setAttribute('class', 'hidden')
        RegisterDiv.setAttribute('class', 'hidden')
        SucRegister.setAttribute('class', 'hidden')
        LoginForm.setAttribute('class', 'hidden')
        RegisterForm.setAttribute('class', 'hidden')
      }
</script>



 </body>
</html>

所以网站：mycoolwebsite。所以，当我没有让它工作时真的很烦人！

而且我也尝试制作一个刷新页面的js脚本而不刷新它。（刷新代码）

所以，如果你想要例子，进入链接，然后进入登录页面并键入一些东西，而不是去注册并输入内容，然后返回登录..你看到它仍然存在..与寄存器相同！

Answer 1

正如评论中所说，你应该得到元素并将它们的值设置为'' - 空字符串。

element.value = '';

放在哪里？

在切换标签时发生的功能中，如果我正确理解了它的LoginBtn.onclick

只需在开头添加用户名和密码输入

即可

Answer 2

我可能会在这里投票给我的答案，但我希望答案会有所帮助。给出的答案涵盖了您的问题，但我想建议一些编写Web应用程序的学习和研究。从您的代码片段中可以看到很多内联CSS，并且可能会建议使用CSS选择器简化/替换您的JS。

您可以查看使用CSS类来隐藏您不想要的内容，而不是隐藏和显示基于状态的元素。这将使其更易于阅读和更容易阅读。

HTML和CSS以及Javascript：如何使onclick甚至删除输入文本字段中的文本

2 个答案: