Question

点击提交后，请帮助修复算法并防止重新加载：我的网站必须检查，用户是否输入过昵称？如果是，那么网站必须显示他的名字，如果没有，则要求键入。如果用户决定更改它，他将单击“重置用户名”。

单击“重置”后，用户必须提交两次其名称（第一次单击“设置”后，将重新加载整个页面，而第二次单击后，则仅重新加载一个元素）。请帮助修复它-用户只需提交一次。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var formNewName = '<form id="new-task"> <input id="nickN" autocomplete="off" autofocus placeholder="Write your nick" type="text"> <input id="submitname" type="submit" value="Set new name1"> </form>';
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelector('#setnewname').onsubmit = () => {
            var newname;
            localStorage.setItem('localN', newname);
            document.querySelector('#nickName').innerHTML = formNewName;
            // Stop form from submitting
            return false;
            };
        });
        // Checking does user entered his name
        if ( !localStorage.getItem('localN') || localStorage.getItem('localN')=="undefined" )
        {   var nick;
            document.addEventListener('DOMContentLoaded', () => {
                    document.querySelector('#nickName').innerHTML = formNewName;
                    document.querySelector('#new-task').onsubmit = () => {
                        nick = document.querySelector('#nickN').value;
                        localStorage.setItem('localN', nick);
                        document.querySelector('#nickName').innerHTML = "Your nick is: <b>" + localStorage.getItem('localN') + '</b>';
                        // Stop form from submitting
                        return false;
                    };
                });
        }
        else
        {
            document.addEventListener('DOMContentLoaded', () => {
                document.querySelector('#nickName').innerHTML = "Your nick is: <b>" + localStorage.getItem('localN') + '</b>'; 
            });  
        }
   </script>   
</head>
<body>
    <div id = "nickName"></div>
    <div id = "newname">
        <br>
        <form id="setnewname">
            <input id="submitreset" type="submit" value="Reset nick name">
        </form>
    </div>    
</body>

更新：event.preventDefault();和event.stopPropagation();无助于解决问题。

Answer 1

很抱歉，如果您仍然有它，我无法在您的代码中从用户那里获取值，所以无法及时回复，我无法添加用户可以输入的输入字段，因此我将其添加，然后在id提交时重置您将执行此操作：我最常使用jquery，因此其语法将是

// HTML CODE TO ADD
<input type="text" name="entername" id="entername">

// than in jquery for the submit button you already have
$(document).on("click","#submitreset",function(e){
   e.preventDefaults();
   var name = $(this).val();

   // you can print the value in the div with this id
   $("#nickName").html(name);


});

Answer 2

在StackOverflow的俄语分支中，我收到了答案（https://ru.stackoverflow.com/a/901260/291735）：

HTML

<div id = "nickName">
          <form id="new-task">
      <input id="nickN" autocomplete="off" autofocus placeholder="Write your nick" type="text"> 
        <input id="submitname" type="submit" value="Set new name1"> </form>
</div>
    <div id = "newname">
        <br>
        <form id="setnewname">
            <input id="submitreset" type="submit" value="Reset nick name">
        </form>
    </div>

JavaScript

var setName = document.getElementById('submitname');
var reset = document.getElementById('submitreset');
var nickN = document.getElementById('nickN');

document.addEventListener('DOMContentLoaded', () => {
  if (localStorage.getItem('localN')!== null){
document.querySelector('#nickName').innerHTML = "Your nick is: <b>" + localStorage.getItem('localN') + '</b>'
  }
})

setName.addEventListener('click', function(){
var newName = document.getElementById('nickN').value;
localStorage.setItem('localN', newName);
document.querySelector('#nickName').innerHTML = "Your nick is: <b>" + localStorage.getItem('localN') + '</b>'
})

reset.addEventListener('click', function(){
delete localStorage['localN'];
document.querySelector('#nickName').innerHTML = '<input id="nickN" autocomplete="off" autofocus placeholder="Write your nick" type="text"> <input id="submitname" type="submit" value="Set new name1">'
});

是否存在LocalStorage变量：如果元素重新加载后语句不起作用（提交重新加载的表单后页面正在重新加载）

2 个答案: