Struggling to import a javascript class into a html file with javascript

Question

Javascript file:

class Person2
{
    constructor(name, age) {
        this.name = name;
        this.age = age;
      }

      getName() {
        return this.name;
      }
      getAge() {
        return this.age;
      }
}

export default Person2;

Html with javascript:

<script type="module" src="Assets/testfunction.js">
    import pers from "./testfunction.js";
     
    let p  = new pers("1", 1);

    console.log(p.getAge());
    
</script>

If I remove type="module", I just get exceptions that there isn't a reference to pers, but when I include it, the code doesn't run. If I make it a simple script tag with just a console.log inside of it, it will run, and print.

Did you check this: stackoverflow.com/questions/44490627/… — PepperoniSquat
– PepperoniSquat, Commented Jun 19, 2023 at 13:02
Remove src="Assets/testfunction.js". You can't have both src and body of the script — Konrad
– Konrad, Commented Jun 19, 2023 at 13:03
Does this answer your question? What does a script-Tag with src AND content mean? — Konrad
– Konrad, Commented Jun 19, 2023 at 13:04
So, after removing src, I get the error: "Loading module was blocked because of a disallowed MIME type" — Somecode
– Somecode, Commented Jun 20, 2023 at 7:56

Durgesh Nandan Sharma -DNS- · Accepted Answer · 2023-06-22 12:04:23Z

0

Normally the error: "Loading module was blocked because of a disallowed MIME type" comes when you not define the file extension of file at the time of import.

wrong :

import foo from "./foo";

correct :

import foo from "./foo.js"

Your Code Runs Well in my browser

index.html

<!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>
    <script type="module">
        import pers from "./index.js";
         
        let p  = new pers("1", 1);
    
        alert(p.getAge());
        
    </script>
</body>
</html>

index.js

class Person2
{
    constructor(name, age) {
        this.name = name;
        this.age = age;
      }

      getName() {
        return this.name;
      }
      getAge() {
        return this.age;
      }
}

export default Person2;

Output image here

edited Jun 22, 2023 at 12:04

answered Jun 19, 2023 at 14:52

Durgesh Nandan Sharma -DNS-

11 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Somecode Over a year ago

So after removing src, and adding type="module", I get the error: "Loading module was blocked because of a disallowed MIME type"

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Struggling to import a javascript class into a html file with javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related