问如何将tag的内部html改成用户名？
EN

Stack Overflow用户

提问于 2021-07-31 11:45:15

回答 1查看 42关注 0票数 1

我正在尝试将(div.class=loguser)的innerhtml更改为已登录的用户名。为了获得用户名，我编写了一个函数，该函数从内部的register_button (div#register)获取用户名和密码的输入。我编写了一个对象(AddData)，它接受用户名和密码并将其存储在一个数组(Datas)中。将其放入数组后，我创建了一个函数，用于验证用户名和密码是否存在于数组中。如果它确实存在，则假设将innerhtml更改为用户名。但它不起作用。我甚至不能在注册时提交表格。

let datas = [];
const addData = (ev) => {
  ev.preventDefault();
  let data = {
    username: document.getElementById('rusername').value,
    password: document.getElementById('rpassword').value
  }
  datas.push(data);
  document.forms[0].reset();
}
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('register_button').addEventListener('click', addData);
});

function isUserValid(username, password) {
  var username = document.getElementById('lusername').value;
  var password = document.getElementById('lpassword').value;
  for (var i = 0; i < datas.length; i++) {
    if (datas[i].username === username &&
      datas[i].password === password) {
      var name = username;
      document.getElementsByClassName('loguser').innerHTML = username;
    }
  }
}

<body>
  <div class="loguser">
    <td>
      <ul class="nav-area">
        <li class="dropdown"><a href="#">User</a>
        </li>

      </ul>
    </td>
  </div>
  </tr>
  </table>
  </div>

  <div class="wrapper">

    <div class="login_box">
      <div class="login_header">
        <img src="images/alimama.png" alt=""> <br> Login or Register!
      </div>

      <div id="login">
        <form action="" method="POST">
          <input id="lusername" type="text" name="lusername" placeholder="Username" required>
          <br>
          <input id="lpassword" type="password" name="lpassword" placeholder="Password">
          <br>
          <input type="submit" name="login_button" value="Login">
          <br>
          <a href="#" id="signup" class="signup">Need an account? Register here!</a>
        </form>
      </div>

      <div id="register">
        <form action="" method="POST">
          <input id="rusername" type="text" name="rusername" placeholder="Username" required>
          <br>
          <input id="rpassword" type="password" name="rpassword" placeholder="Password" required>
          <br>
          <input id="register_button" type="submit" name="register_button" value="Register">
          <br>
          <a href="#" id="signin" class="signin">Already have an account? Sign in here!</a>
        </form>
      </div>
    </div>


</body>

javascript

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-31 13:22:35

isUserValid()不应该将username和password作为参数，因为它从输入中获取它们。它应该接受一个事件参数，这样你就可以将它作为一个事件侦听器来调用。

document.getElementsByClassName()返回一个NodeList。您需要使用[0]访问第一个匹配项以设置其innerHTML。你也可以使用document.querySelector()，它只返回第一个匹配项。

“登录”按钮没有ID。请添加id="login_button"，以便可以向其添加事件侦听器。

您可以使用find()方法来搜索数组，而不是使用循环。

let datas = [];
const addData = (ev) => {
  ev.preventDefault();
  let data = {
    username: document.getElementById('rusername').value,
    password: document.getElementById('rpassword').value
  }
  datas.push(data);
  document.forms[0].reset();
}
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('register_button').addEventListener('click', addData);
});

function isUserValid(e) {
  e.preventDefault();
  var username = document.getElementById('lusername').value;
  var password = document.getElementById('lpassword').value;
  var found_user = datas.find(d => d.username === username && d.password === password);
  if (found_user) {
    document.getElementsByClassName('loguser')[0].innerHTML = found_user.username;
  }
}

document.getElementById("login_button").addEventListener("click", isUserValid);

<body>
  <div class="loguser">
    User
  </div>

  <div class="wrapper">

    <div class="login_box">
      <div class="login_header">
        <img src="images/alimama.png" alt=""> <br> Login or Register!
      </div>

      <div id="login">
        <form action="" method="POST">
          <input id="lusername" type="text" name="lusername" placeholder="Username" required>
          <br>
          <input id="lpassword" type="password" name="lpassword" placeholder="Password">
          <br>
          <input type="submit" id="login_button" name="login_button" value="Login">
          <br>
          <a href="#" id="signup" class="signup">Need an account? Register here!</a>
        </form>
      </div>

      <div id="register">
        <form action="" method="POST">
          <input id="rusername" type="text" name="rusername" placeholder="Username" required>
          <br>
          <input id="rpassword" type="password" name="rpassword" placeholder="Password" required>
          <br>
          <input id="register_button" type="submit" name="register_button" value="Register">
          <br>
          <a href="#" id="signin" class="signin">Already have an account? Sign in here!</a>
        </form>
      </div>
    </div>


</body>