使用onsubmit事件调用异步函数

发布于 2025-02-10 10:29:06 字数 4344 浏览 1 评论 0原文

我正在尝试使用HTML表单的OnSubmit事件来调用异步函数。但是不幸的是，我遇到了这个错误...

这是我的HTML代码...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do App</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./script.js"></script>
</head>

<body>
    
    <div class="background-image">
        <img src="./assets/bg-desktop-dark.jpg">
    </div>

    <div class="container">
        <div class="header">
            <div class="title">
                TODO
            </div>
            <div class="theme">
                <img src="./assets/icon-sun.svg" alt="">
            </div>
        </div>

        <div class="new-todo">
            <div class="check">
                <div class="check-mark">
    
                </div>
            </div>
            <div class="new-todo-input">
                <form onsubmit="addItem(event)">
                    <input id="todo-input" type="text" placeholder="Create a new todo...">
                </form>
            </div>
        </div>

        <div class="todo-items-wrapper">
            <div class="todo-item">
                <div class="check">
                    <div class="check-mark">
                        <img src="./assets/icon-check.svg">
                    </div>
                </div>
                <div class="todo-text">
                    Default Todo Text
                </div>
            </div>
            

            <div class="todo-items-info">
                <div class="items-left">
                    5 items left
                </div>
                <div class="items-statuses">
                    <span class="active">All</span>
                    <span>Active</span>
                    <span>Completed</span>
                </div>
                <div class="items-clear">
                    <span>Clear Completed</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

这是我的JavaScript代码...

// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-analytics.js";
import { getFirestore, collection, addDoc } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-firestore.js";

const firebaseConfig = {
  apiKey: "api_key",
  authDomain: "auth_domain",
  projectId: "project_id",
  storageBucket: "storage_bucket",
  messagingSenderId: "messagin_sender_id",
  appId: "add_id",
  measurementId: "measurement_id"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);


async function addItem(event)
{
    event.preventDefault();
    let text = document.getElementById("todo-input");
    
    try
    {
        const docRef = await addDoc(collection(db, "todo-items"), {
          text: text.value,
          status: "active"
        });
        console.log("Document written with ID: ", docRef.id);
      } 
    catch (e) 
    {
        console.error("Error adding document: ", e);
    }
      
}

请告诉我我该如何解决此问题....... ................................................................................. ..

原文

I was trying a call an async function using the onsubmit event of an HTML form. But unfortunately, I am getting this error...

Here is my HTML code...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do App</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./script.js"></script>
</head>

<body>
    
    <div class="background-image">
        <img src="./assets/bg-desktop-dark.jpg">
    </div>

    <div class="container">
        <div class="header">
            <div class="title">
                TODO
            </div>
            <div class="theme">
                <img src="./assets/icon-sun.svg" alt="">
            </div>
        </div>

        <div class="new-todo">
            <div class="check">
                <div class="check-mark">
    
                </div>
            </div>
            <div class="new-todo-input">
                <form onsubmit="addItem(event)">
                    <input id="todo-input" type="text" placeholder="Create a new todo...">
                </form>
            </div>
        </div>

        <div class="todo-items-wrapper">
            <div class="todo-item">
                <div class="check">
                    <div class="check-mark">
                        <img src="./assets/icon-check.svg">
                    </div>
                </div>
                <div class="todo-text">
                    Default Todo Text
                </div>
            </div>
            

            <div class="todo-items-info">
                <div class="items-left">
                    5 items left
                </div>
                <div class="items-statuses">
                    <span class="active">All</span>
                    <span>Active</span>
                    <span>Completed</span>
                </div>
                <div class="items-clear">
                    <span>Clear Completed</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Here is my Javascript code...

// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-analytics.js";
import { getFirestore, collection, addDoc } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-firestore.js";

const firebaseConfig = {
  apiKey: "api_key",
  authDomain: "auth_domain",
  projectId: "project_id",
  storageBucket: "storage_bucket",
  messagingSenderId: "messagin_sender_id",
  appId: "add_id",
  measurementId: "measurement_id"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);


async function addItem(event)
{
    event.preventDefault();
    let text = document.getElementById("todo-input");
    
    try
    {
        const docRef = await addDoc(collection(db, "todo-items"), {
          text: text.value,
          status: "active"
        });
        console.log("Document written with ID: ", docRef.id);
      } 
    catch (e) 
    {
        console.error("Error adding document: ", e);
    }
      
}

Please tell me how can I fix this...........................................................

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

记忆消瘦 2025-02-17 10:29:06

如该错误所示，“添加剂”函数不存在。

也许脚本文件尚未插入HTML中。

回复收藏 0 原文

心不设防 2025-02-17 10:29:06

错误消息告诉您AddItem缺少。即使您已经创建了它并且它存在于文件中，但在您调用它时，它也不存在。由于您的脚本具有 模块的类型，您需要import it，例如：

import addItem from ./script.js

在此处阅读更多：< a href =“ https://developer.mozilla.org/en-us/docs/web/javascript/reference/reference/statement/statement/statement/import“ rel =” nofollow noreferrer“ /docs/web/javascript/reference/catchements/import

但是，要确保这有效，您需要导出您的additem function。

The error message tells you that addItem is missing. Even though you have created it and it exists in a file, it does not exist in your page when you call it. Since your script has a type of module, you need to import it, like: