如何将输入表单保存到localStorage，但我有2个错误

问题描述 投票：0回答：1

任何人都可以帮助我处理我两天前创建的迷你项目，但今天还没有完成。所以，我有两个错误，第一个是

index.html:91 Uncaught ReferenceError: handleUserLogin is not defined
    at HTMLButtonElement.onclick (index.html:91:70)
onclick @ index.html:91

第二个是当用户在点击登录按钮后输入名字时，本地存储应该保存，但没有键和值保存，但当我在控制台检查时，该值显示出来。

这是我的 html 代码，下面带有 javascript 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
    <div class="simple-login-with-form-dbLocalStorage">
        <form>
            <input type="text" id="name" name="nama" placeholder="fill this blank forms" />
        </form>
        <button onclick="handleUserLogin()" type="button" id="login">Login</button>
    </div>

    <script src="script.js" text="javascript"></script>
</body>
</html>


const loginButton = document.getElementById("login");

document.addEventListener("DOMContentLoaded", async function () {
    async function handleUserLogin() {

        let formInput = document.getElementById("name").value.trim();
        let userInput = formInput;

        if (userInput !== "") {
            alert(`Welcome ${userInput}`);
        } else if (typeof (userInput) === "number") {
            alert(`Must be a sentences not a number`);
        } else {
            alert("Please fill this form before antoher actions")
        }

        return console.log(userInput);
    }
    loginButton.addEventListener("click", handleUserLogin);
});

async function createLocalDataStorage(){
    "use strict";
    
    try {
        localStorage.setItem("userInput", await userInput);
        console.log("User Input has been saved!", {}, userInput);
    } catch(err){
        console.log("Error at the : " + err);
    }
}
javascript html local-storage
1个回答
0
投票

您似乎遇到了两个问题：

  • ReferenceError: handleUserLogin is not defined
    ：发生此错误是因为 
    handleUserLogin
    函数是在 
    DOMContentLoaded
    事件侦听器范围内定义的，因此无法从 HTML 按钮中的 
    onclick
    属性期望找到它的全局范围访问它。要解决此问题，您应该在全局范围内定义 
    handleUserLogin
    函数，以便可以从 HTML 访问它。

  • localStorage 不保存值：代码中永远不会调用 

    createLocalDataStorage
    函数。此外，它还尝试访问 
    userInput
    变量，该变量是在 
    handleUserLogin
    函数作用域内定义的，并且无法从 
    createLocalDataStorage
    访问。要将用户输入保存到 
    localStorage
    ，您应该从 
    createLocalDataStorage
    函数中调用 
    handleUserLogin
    函数。

这是更正后的代码：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
    <div class="simple-login-with-form-dbLocalStorage">
        <form>
            <input type="text" id="name" name="nama" placeholder="fill this blank forms" />
        </form>
        <button type="button" id="login">Login</button>
    </div>

    <script src="script.js" text="javascript"></script>
</body>
</html>


// script.js
const loginButton = document.getElementById("login");

async function handleUserLogin() {
    let formInput = document.getElementById("name").value.trim();
    let userInput = formInput;

    if (userInput !== "") {
        alert(`Welcome ${userInput}`);
        await createLocalDataStorage(userInput); // Call the function to save to localStorage
    } else if (typeof (userInput) === "number") {
        alert(`Must be a sentence, not a number`);
    } else {
        alert("Please fill this form before any other actions");
    }

    console.log(userInput);
}

loginButton.addEventListener("click", handleUserLogin);

async function createLocalDataStorage(userInput) {
    try {
        localStorage.setItem("userInput", userInput);
        console.log("User Input has been saved!", userInput);
    } catch(err) {
        console.log("Error: " + err);
    }
}

通过这些更改，现在可以全局访问 

handleUserLogin
函数，并且可以正确调用 
createLocalDataStorage
函数以将用户输入保存到 
localStorage
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.