如何将tag的内部html改成用户名？
如何将tag的内部html改成用户名？
提问于 2021-07-31 19:45:15
我正在尝试将(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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-31 21: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68605347
复制相关文章
相似问题
腾讯云开发者
