Trying to instantiate JavaScript class in a html file

Question

I'm trying to instantiate a JavaScript class in another HTML file.

Here is the JavaScript class:

class Puzzle {
  constructor(fenStart, pgnEnd) {
    this.fenStart = fenStart;
    this.pgnEnd = pgnEnd;
  }
}

module.exports = Puzzle;

And here is the HTML file:

<!DOCTYPE html>
<html>
    <body>
        <script src="jquery-3.2.1.min.js"></script>
        <script src="class.js"></script>
        <p id="demo"></p>

        <script>
            var demoEL = $('#demo');

            const x = new Puzzle("fenStart", "pgnEnd");

            demoEL.html(x.fenStart);
        </script> 
    </body>
</html>

However when ever I open the HTML file in chrome nothing appears on the page. And in the developer console I get the error "Uncaught ReferenceError: module is not defined, at class.js:8" How can I properly instantiate the puzzle class in this HTML file?

PS: I read that JQuery might be needed for this so I downloaded "jquery-3.2.1.min.js" and included it in the same folder as the JavaScript class and the HTML file.

Are you getting any error in the console?? Check in the developers tool once. require might not be supported. — Pritam Bohra
– Pritam Bohra, Commented Jan 20, 2018 at 4:02
In the developer tools I am getting the error "Uncaught ReferenceError: module is not defined, at class.js:8" — Ludwig
– Ludwig, Commented Jan 20, 2018 at 4:11
You will not need to export the Puzzle module as it is already defined in the global namespace. — Brian
– Brian, Commented Jan 20, 2018 at 4:15

Pritam Bohra · Accepted Answer · 2018-01-20 04:31:40Z

1

In that case, you don't need module.exports You can directly create the object and update the DOM. If at all you want to use modules in the browser you can use a module bundler like webpack

answered Jan 20, 2018 at 4:31

Pritam Bohra

4,39110 gold badges45 silver badges78 bronze badges

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

Comments

OnlySalman · Accepted Answer · 2018-01-20 05:11:32Z

there is no need to say module.exports = Puzzle; this is what I did and it works fine.

JS

class Puzzle {
 constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
 }}

HTML

<!DOCTYPE html>
 <html>
  <body>
     <script src="jquery.min.js"></script>
     <script src="class.js"></script>
     <p id="demo"></p>

     <script>
        var demoEL = $('#demo');

        const x = new Puzzle("fenStart", "pgnEnd");

        console.log(x.fenStart);
        console.log(x.pgnEnd);
    </script> 
    </body>
   </html>

since we are on the subject I highly recommend of using pseudoclassical pattern this pattern will make your life much easier if you are planning to add a function to your class

just to clarify this is an example of your class :

pseudoclassical patern - HTML :

<!DOCTYPE html>
  <html>
  <body>
    <script src="jquery.min.js"></script>
    <script src="class.js"></script>
    <p id="demo"></p>

    <script>
        var demoEL = $('#demo');

        const x = new Puzzle("fenStart", "pgnEnd");

        console.log(x.fenStart);
        console.log(x.pgnEnd);
        var bla = x.bla();
        console.log(bla);
    </script> 
</body>

pseudoclassical pattern - JS :

var Puzzle = function(fenStart,pgnEnd){
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}


Puzzle.prototype.bla = function(){ // some other function
return "bla";
}

that's all, have a nice coding.

Collectives™ on Stack Overflow

Trying to instantiate JavaScript class in a html file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related