Наличие нескольких проблем с хранением сеанса и оператора if для сохранения имени в отдельном файле. - PullRequest
Новая
       58

Наличие нескольких проблем с хранением сеанса и оператора if для сохранения имени в отдельном файле.

0 голосов
/ 26 апреля 2018

У меня проблемы с отображением сохраненного имени с использованием «Session Storage» в отдельном html-файле. Я хочу, чтобы он выполнялся, когда я нажимал кнопку «ввод», чтобы раздел «имя» превращался в имя, которое вводили пользователи. Для дальнейшего объяснения того, что должно происходить.

  1. Когда пользователь ничего не печатает = "", это должно препятствовать продвижению пользователя, и часть "Как тебя зовут" меняется на "Пожалуйста, введите свое имя".

  2. Когда пользователи вводят слово или их имена, сохраненное имя должно отображаться на странице home.html. 

// login.js section

var username = document.getElementById("user_name");
var enter = document.getElementById("enter");
var firstname = document.getElementById("name");
var message = document.getElementById("message");

function login(){
    if (username.value == "") {
     message.innerHTML = "Please enter your name.";
    } else {
        enter.addEventListener("click",function(){
            window.location.href = "home.html";
            sessionStorage.setItem('name',username.value);
            firstname.innerText = sessionStorage.getItem('name');
            console.log(name);
        });
    }   
}
          <!-- This is located in login.html -->
          <div id="question" class="question_ani">
                <h1 id="message">What is your name?</h1>
            </div>

            <input type="text" id="user_name" maxlength="10" class="input_ani">

         <button id="enter" class="animate-bottom" type="button" onclick="login()">enter</button>
         
          <hr>
          <!-- This is located in home.html -->
          <div class="speech" id="speech">Hi, <span id="name">name</span><br />Weclome to Recyclone.<br />I am here to teach you how to recycle in a fun way. <br />Let's learn how to recycle!</div>
          
         <!-- both are linked to <script src=js/login.js></script> -->

У меня проблемы.

  1. Хранилище сеансов работает так же, как и часть смены сообщений, но по какой-то причине пользователям приходится нажимать кнопку «ввод» дважды , чтобы двигаться вперед.

  2. Как и выше, сохраненное имя должно отображаться в разделе, но по какой-то причине оно не отображается. *

Я всегда благодарен за постоянную помощь сообщества и заранее благодарю тех, кто находит время, чтобы прочитать его. Вот моя ссылка на github для этого проекта. https://github.com/monuda85/recyclone

1 Ответ

0 голосов
/ 26 апреля 2018

Ваша первая проблема заключается в том, что вы создаете прослушиватель событий внутри обработчика событий для кнопки входа в систему, поэтому, когда вы нажимаете кнопку в первый раз, вы говорите ей, что делать, когда она нажата, но затем вам нужно нажать это снова, чтобы это произошло.

Что касается второй проблемы, для того, чтобы увидеть значение, вам нужно получить его из sessionStorage на home.html и показать его там. Вы устанавливаете значение и затем сразу переходите на другую страницу, поэтому вы его не видите.

В идеале, удалите onclick="login()" с кнопки и измените свой код на этот ... 

enter.addEventListener("click", login); // assign the click handler like this

function login() {
    if (username.value == "") {
        message.innerHTML = "Please enter your name.";
    }
    else {
        sessionStorage.setItem("name", username.value);

        // you won't see the effects of these 2 lines for long (if at all)
        // because you immediately go to another page.
        firstname.innerText = sessionStorage.getItem("name");
        console.log(name);

        window.location.href = "home.html";
    }   
}
...