因此,我是一个初学者,我正在编写一个用户名创建表单,该表单在指定的容器中显示创建的用户名.我已经制作了表格,当我提交表格时,EventListener
知道我.提交表单时发生的函数会使表单不可见,并将项设置为localstorage
.它还在容器中显示创建的用户名.(注意:我知道我编写的代码在代码片段中不起作用,但我在一个实际的html文件中进行了测试,它起作用了).我想知道,如果用户名已经存在,如何使表单永远不可见(即使在页面重新加载时也是如此),以及如何在页面重新加载时使用户名保留在H1容器中.所有的帮助我们都很感激!
<!DOCTYPE html>
<html>
<body>
<form id="username-creator" class="username-creator">
<input type="text" id="username-creator-input" required>
<button type="submit">Submit</button>
</form>
<div id="username-container">
<h1 id="username-container-h1">
<!-- This is where the created username goes -->
</h1>
</div>
<script>
document.getElementById('username-creator').addEventListener('submit', function(event) {
event.preventDefault();
var username = document.getElementById('username-creator-input').value;
localStorage.setItem('username', username);
document.getElementById('username-creator').style.display = "none";
document.getElementById('username-container-h1').innerText = username;
});
</script>
</body>
</html>