Is there any way I can use a prototype property in this code to make it look more DRY?
<!DOCTYPE html>
<html>
<style type="text/css">
#demo1, #demo2, #demo3 {
font-family: 'Open Sans', sans-serif;
font-size: 1.2rem;
}
</style>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script> // ensure script is called last in the HTML body
// this is a constructor function
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// these are new instances
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
// this is calling the instances and assembling them into the DOM
document.getElementById("demo1").innerHTML = "My father is " + myFather.age + ". My mother is " + myMother.age + ".";
// this is another constructor function
function Mutation(firstName, lastName, looks, power) {
this.firstName = firstName;
this.lastName= lastName;
this.looks = looks;
this.power = power;
}
// these are new instances
var xMen1 = new Mutation ("Scott", "Summers", "handsome", "laser");
var xMen2 = new Mutation ("Ororo", "Munroe", "beauty", "lightening and wind");
document.getElementById("demo2").innerHTML = "Fierce as a storm, " + xMen2.firstName + "'s tornado-like powers is matched only by her astounding " + xMen2.looks + ".";
document.getElementById("demo3").innerHTML = "Leader of the Xmen, " + xMen1.firstName + "'s power is shown by his unforgiving " + xMen1.power + " filled gaze.";
</script>
</body>
</html>