Calling async function using onsubmit event of form

Question

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

First thing to fix is don't directly connect to your db on the frontend. Write a backend — mstephen19, Jun 26 '22 at 13:39
@mstephen19 Can you please tell me how can I do so? I am new to web dev. I was just trying to build a basic todo web app using firebase version 9. — Mr. 17, Jun 26 '22 at 13:44

score 0 · Answer 1 · answered Jun 26 '22 at 13:42

0

As the error shows, the "addItem" function doesn't exist.

Maybe the script file hasn't been inserted in the HTML.

answered Jun 26 '22 at 13:42

Mina

14,386
3
13
26

I have inserted the script file in HTML – Mr. 17 Jun 26 '22 at 13:48
Could you provide the full page and script, so we can debug it? – Mina Jun 26 '22 at 13:50
I have added the entire code, please have a look – Mr. 17 Jun 26 '22 at 14:12

Lajos Arpad · Answer 2 · 2022-06-26T15:17:38.003

-1

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:

import addItem from ./script.js

Read more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

However, to make sure that this works, you need to export your addItem function.

edited Jun 26 '22 at 15:17

answered Jun 26 '22 at 14:38

Lajos Arpad

64,414
37
100
175

When I change the `type` from `module` to `text/javascript`, it gives me this error `Uncaught SyntaxError: Cannot use import statement outside a module` – Mr. 17 Jun 26 '22 at 14:53
@the_future_warrior you are correct about this. Basically if you are to change the `type` of the `script` to `text/javascript`, then the `import` commands inside your file become invalid. As a result, I have removed the last section, as it is not as simple as changing the `type`. – Lajos Arpad Jun 26 '22 at 15:21

Calling async function using onsubmit event of form

2 Answers2