Uncaught Reference Error: variable undefined-CodePudding

I'm trying to define a class in a separate javascript file and then use that class in my HTML file.

Here's what I'm trying.

I create the class VoiceCard in the VoiceCard.js file:

class VoiceCard {
    constructor(nickname, date_time, post_title, voice_post) {
        this.nickname = nickname;
        this.date_time = date_time;
        this.post_title = post_title;
        this.voice_post = voice_post;
    }

I create an HTML file where I add the file as the source:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <script type="module" src="../VoiceCard.js"></script>
</head>

I create a script where I call the class to create a new variable of the VoiceCard class and log one of the attributes to the console:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <script type="module" src="../VoiceCard.js"></script>
</head>
<body>
<script type="text/javascript">
    let v_card = new VoiceCard(
        "Lorder",
        "12:00",
        "First Voicer Post",
        "file_location.mp4");

    console.log(v_card.nickname);
</script>
</body>
</html>

The error is: Uncaught ReferenceError: VoiceCard is not defined.

I can't seem to find the reason for the error. Any help would be appreciated.

CodePudding user response：

Modules don't create globals. That's most of the point of them. :-)

Here's how to do what you seem to want to do:

Remove the script tag for VoiceCard.js.
In VoiceCard.js, export the class by adding export in front of class.
Change your inline script to an inline module that imports the class from the VoiceCard.js file.

So:

export class VoiceCard {
// ^^^
    constructor(nickname, date_time, post_title, voice_post) {
        this.nickname = nickname;
        this.date_time = date_time;
        this.post_title = post_title;
        this.voice_post = voice_post;
    }
} // <== This closing `}` was missing

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <!-- No script tag for VoiceCard -->
</head>
<body>
<script type="module">
import { VoiceCard } from "../VoiceCard.js"; // ***
let v_card = new VoiceCard(
    "Lorder",
    "12:00",
    "First Voicer Post",
    "file_location.mp4"
);
console.log(v_card.nickname);
</script>
</body>
</html>

The browser will download VoiceCard.js automatically when it sees the import.

CodePudding user response：

You can remove type="module" to fix this problem

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <script src="../VoiceCard.js"></script>
</head>
<body>
<script type="text/javascript">
    let v_card = new VoiceCard(
        "Lorder",
        "12:00",
        "First Voicer Post",
        "file_location.mp4");

    console.log(v_card.nickname);
</script>
</body>
</html>