会话存储和将名称存储在单独文件中的 if 语句有几个问题

Question

我无法在单独的 html 文件中使用 "Session Storage" 显示存储的名称。我希望它在我单击 "enter" 按钮时执行，以便 "name" 部分更改为用户键入的名称。进一步解释应该发生什么。

当用户输入nothing = ""时，应该阻止用户继续前进，"What is your name"部分变为"Please enter your name".
当用户输入一个词或他们的名字时，存储的名字将显示在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> -->

我遇到的问题。

会话存储和消息更改部分正在工作，但由于某些原因，用户必须单击 "enter" 按钮两次才能前进。
如前所述，存储的名称应该显示在该部分中，但由于某种原因没有显示。*

我一直很感激社区不断的帮助，并提前感谢那些花时间阅读它的人。这是我的 github link 这个项目的详细信息。 https://github.com/monuda85/recyclone

Answer 1

您的第一个问题是您在登录按钮的事件处理程序中创建了一个事件侦听器，因此当您第一次单击该按钮时，您是在告诉它在单击该按钮时要做什么，但随后您有再次单击它以实现它。

至于第二个问题，要查看值，您需要从 home.html 上的 sessionStorage 获取它并在那里显示它。您设置了该值，然后立即移至另一页，这就是您看不到它的原因。

理想情况下，从按钮中删除 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";
    }   
}

会话存储和将名称存储在单独文件中的 if 语句有几个问题

Having a couple of issues with session storage and if statement to store name in a separate file

html

javascript

session-storage

local-storage