How to use a external Javascript class in html?

Question

I have a .js file which has a class defined. I want to call this class from <script> from another html file.

component.js:

class TryClass {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert( this.name );
  }
}

main.html:

<html>
<script src="./component.js" />

<script>
var user = new TryClass( "John" );
user.sayHi();
</script>

<body>
</body>

This doesn't show the alert when I load main.html (from my webserver). However, with the inspect console, I am able to use the TryClass.

How to resolve this?

xianshenglu · Accepted Answer · 2018-04-01 08:19:41Z

7

after test i think the problem is your format

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

<head>
    <script src="component.js"></script>
    <script>
        var user = new TryClass("John");
        user.sayHi();
    </script>

</head>

<body>

</body>

</html>

you lost</script> after <script src="./component.js" />,i guess this is the worst error though you also lost </html> and <head></head>

edited Apr 1, 2018 at 8:19

answered Apr 1, 2018 at 7:24

xianshenglu

5,4483 gold badges21 silver badges39 bronze badges

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

Comments

Vikas Garg · Accepted Answer · 2018-04-01 07:32:27Z

-1

Please try by

var TryClass = function(name){
    this.name = name;
}

TryClass.prototype.sayHi = function () {
    alert( this.name );
}

answered Apr 1, 2018 at 7:32

Vikas Garg

2002 silver badges8 bronze badges

1 Comment

Dream_Cap Over a year ago

This doesn't really answer the question. Your answer is in ES5 format and the author's post is in ES6 for describing a class.

Collectives™ on Stack Overflow

How to use a external Javascript class in html?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related