Call functions in a JavaScript from an HTML

Question

I am trying to call a method from JavaScript from an HTML file. Specifically, call the method "speak" from Dog and Cat (shown below the HTML). I think I should be using window.onload = function() or something similar, with onload, but I do not know how to call the methods.

This is the HTML content:

<!DOCTYPE html>
<html>
    <head>
        <script src="Ej6.js"></script>

        <script>
            window.onload = function() {
                            }
        </script>

    </head>

    <body>

    </body>
</html>

And this is my JavaScript code where the functions I want to call are:

function Animal(name, eyeColor) {
    this.name = name;
    this.eyeColor = eyeColor;
}

Animal.prototype.getName=function() {
    return this.name;
};

Animal.prototype.getEyeColor=function() {
    return this.eyeColor;
};

Animal.prototype.toString=function() {
    return this.name + " " +
           this.eyeColor;
};

function Dog(name, eyeColor) {
    Animal.call(this, name, eyeColor);
}

Dog.prototype = new Animal();

Dog.prototype.toString=function() {
    return Animal.prototype.toString.call(this);
};

Dog.prototype.speak=function() {
    return "woof";
};

function Cat(name, eyeColor) {
    Animal.call(this, name, eyeColor);
}

Cat.prototype = new Animal();

Cat.prototype.toString=function() {
    return Animal.prototype.toString.call(this);
};

Cat.prototype.speak=function() {
    return "meow";
};

There's nothing special about calling them from window.onload. Just call them the way you normally would. — Barmar
– Barmar, Commented Mar 21, 2018 at 22:19
You should use prototype inheritance so you don't need to define toString() methods in each class. — Barmar
– Barmar, Commented Mar 21, 2018 at 22:21
A <script> tag is missing its corresponding </script> end tag (or perhaps it shouldn't be there at all). It is a good idea to run the HTML content through an HTML validator, e.g. the W3C Markup Validation Service. — Peter Mortensen
– Peter Mortensen, Commented Mar 12, 2019 at 11:23

Sebastian Speitel · Accepted Answer · 2018-03-21 22:24:27Z

You can use JavaScript like normal, every script included, whether indirectly using <script src="..."></script> or directly <script>...</script> shares the same scope.

function Animal(name, eyeColor) {
  this.name = name;
  this.eyeColor = eyeColor;
}
Animal.prototype.getName = function() {
  return this.name;
};
Animal.prototype.getEyeColor = function() {
  return this.eyeColor;
};
Animal.prototype.toString = function() {
  return this.name + " " +
    this.eyeColor;
};

function Dog(name, eyeColor) {
  Animal.call(this, name, eyeColor);

}
Dog.prototype = new Animal();
Dog.prototype.toString = function() {
  return Animal.prototype.toString.call(this);
};
Dog.prototype.speak = function() {
  return "woof";
};

function Cat(name, eyeColor) {
  Animal.call(this, name, eyeColor);

}
Cat.prototype = new Animal();
Cat.prototype.toString = function() {
  return Animal.prototype.toString.call(this);
};
Cat.prototype.speak = function() {
  return "meow";
};

<!-- This is inside the HTML -->
<script>
  window.onload = function() {
    myCat = new Cat("Kitten", "green");
    console.log(myCat.speak());
  }
</script>

Peter Mortensen · Accepted Answer · 2019-03-12 11:28:24Z

window.onload happens after all the content resources (images, etc.) have been loaded. If you do not want to use that you can append your object initialization just after your main code, example.

function Animal(name, eyeColor) {
  this.name = name;
  this.eyeColor = eyeColor;
}
Animal.prototype.getName = function() {
  return this.name;
};
Animal.prototype.getEyeColor = function() {
  return this.eyeColor;
};
Animal.prototype.toString = function() {
  return this.name + " " +
    this.eyeColor;
};

function Dog(name, eyeColor) {
  Animal.call(this, name, eyeColor);

}
Dog.prototype = new Animal();
Dog.prototype.toString = function() {
  return Animal.prototype.toString.call(this);
};
Dog.prototype.speak = function() {
  return "woof";
};

function Cat(name, eyeColor) {
  Animal.call(this, name, eyeColor);

}
Cat.prototype = new Animal();
Cat.prototype.toString = function() {
  return Animal.prototype.toString.call(this);
};
Cat.prototype.speak = function() {
  return "meow";
};

const dog = new Dog('test', 'brown')
console.log(dog.speak());

Collectives™ on Stack Overflow

Call functions in a JavaScript from an HTML

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