Существует ли переменная LocalStorage: инструкция if не работает после перезагрузки элемента

328

24 марта 2019, 19:10

Друзья, добрый день.

Помогите, пожалуйста, исправить алгоритм: мой веб-сайт должен проверить, не ввел ли пользователь ник. Если он это сделал, то веб-сайт должен показать имя, если нет, попросите ввести его. Если пользователь решил изменить его, он нажмет «reset».

После нажатия кнопки «reset» обновляется содержимое элемента c id = "nickName". И по нажатию на обновленной кнопке "Set new name1" обновляется вся страница, а не этот элемент, как это задумано - не отрабатывается событие, описанное в строчках document.querySelector('#new-task').onsubmit = () => { (я думаю, что и в условие if ( программа "не заходит").

<!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>

Подскажите где ошибка?

Answer 1

Может быть такой вариант вам подойдет https://codepen.io/Lukyanenko/pen/LXPOzP

document.addEventListener('DOMContentLoaded', function(){
        var setName = document.getElementById('submitname');
        var reset = document.getElementById('submitreset');
        var nickN = document.getElementById('nickN');

          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">'
        });
        })
<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>

Answer 2

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;
                };

попробуйте переписать на:

document.querySelector('#new-task').onsubmit = (event) => {
                    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
                    event.preventDefault();
                    return false;
                };