CODEWITHSUNDEEP
javascripthtmlobject
SpottedFire
SpottedFire

Reputation: 9

None of the JavaScript Objects function or display on browser

I'm new to JavaScript. I'm trying to play a bit with Objects, like creating them and displaying them, etc. For some reason, nothing is showing up in any browser I try on: FireFox, Google Chrome, and the beloved Internet Explorer. I'm pretty sure I typed it in correct, along with connecting the external document to my page. I've tried to put it in both the 'head' tag and the 'body' tag. I've also assigned the ID to a 'p' tag correctly. Other functions of code work perfectly, it's anything Object related that doesn't work. Is there anything I'm doing wrong? May I have some help? Thank you.

JavaScript:

function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML =
"My father is " + myFather.age + ". My mother is " + myMother.age;

Upvotes: 0

Views: 140

Answers (3)

bumbumpaw
bumbumpaw

Reputation: 2528

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML =
"My father is " + myFather.age + ". My mother is " + myMother.age;
}
</script>
</head>

<body onload="myFunction()">
<p id = "demo">Hello World!</p>
</body>

</html>

check this out, its working, just call the function on onload or what event you want it to show.

This is a list of events you can choose from.

Upvotes: 1

Ajesh VC
Ajesh VC

Reputation: 635

Its actually working code. you just need to give a div with id=demo in your page body section so that you get the output because you displaying your result in div id="demo".

Try this as your code

 <html>
 <head>
 </head>
 <body>
 <div id="demo"> </div>
 <script type="text/javascript">
 var myFather = new person("John", "Doe", 50, "blue");
 var myMother = new person("Sally", "Rally", 48, "green");

 function person(first, last, age, eye) {
   this.firstName = first;
   this.lastName = last;
   this.age = age;
   this.eyeColor = eye;
 }

 document.getElementById("demo").innerHTML ="My father is " + myFather.age + ". My mother is " + myMother.age;
 </script>
 </body>
 </html>

look this http://jsfiddle.net/23ck7

Upvotes: 0

khagesh
khagesh

Reputation: 948

One rule that you can always follow is to keep your JavaScript code at the bottom of page, just before body tag closes. Like below

<script type="text/javascript">
    function person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

    var myFather = new person("John", "Doe", 50, "blue");
    var myMother = new person("Sally", "Rally", 48, "green");

    document.getElementById("demo").innerHTML =
     "My father is " + myFather.age + ". My mother is " + myMother.age;
</script>
</body>

and everything will work as expected.

Upvotes: 1

Related Questions