CODEWITHSUNDEEP
javascripthtml
M.K
M.K

Reputation: 1495

Call functions in a JavaScript from an HTML

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";
};

Upvotes: 0

Views: 186

Answers (2)

GibboK
GibboK

Reputation: 73908

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

Upvotes: 1

Sebastian Speitel
Sebastian Speitel

Reputation: 7336

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>

Upvotes: 1

Related Questions