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, Mar 21 '18 at 22:19
You should use prototype inheritance so you don't need to define `toString()` methods in each class. — Barmar, Mar 21 '18 at 22:21
A `` 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](http://validator.w3.org/). — Peter Mortensen, Mar 12 '19 at 11:23

score 1 · Accepted Answer · answered Mar 21 '18 at 22:24

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>

score 1 · Answer 2 · edited Mar 12 '19 at 11:28

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());

Call functions in a JavaScript from an HTML

2 Answers2

Linked