basic Javascript and html object execution

Question

here is a basic program, I don't understand why this is not working:

a object class, houseObject.js:

var string;

    function createSentence(paragraph){
        this.string = paragraph;
    }

    function getString(){

        return string;  
    }

The program for running:

<!DOCTYPE html>
<html>
<head>

<script type = "text/javascript" src="houseObject.js"></script>
<script>

   var temp = new createSentence("hello world");
   var string = temp.getString();
    var para=document.createElement("p");
    var node=document.createTextNode(string);
    para.appendChild(node);


</script>

</head>


<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
    var element=document.getElementById("div1");
    element.appendChild(para);
</script>
</body>
</html>

My second question is: why cant I put

    var element=document.getElementById("div1");
    element.appendChild(para);

inside the head section of the html. Is it because html is a script program, it hasn't read the body section yet?

Thanks in advance

For a faster load and better performance you could put all the JS just before the end body tag. — Mr.Web
– Mr.Web, Commented Aug 5, 2013 at 22:38
Ah I got your problem. When you put the script into head, the element div1 doesn't exist (yet). Place your scripts in the end of your HTML, or use window.load or document.DOMContentLoaded events. — metadings
– metadings, Commented Aug 5, 2013 at 23:19
@metadings, oh I did though, I made another script section right before the end of body section — user308553
– user308553, Commented Aug 5, 2013 at 23:28
you would feel much more comfortable when using jQuery(document).ready - using jQuery also eliminates headaches about attachEvent/addEventListener, selecting elements by id, classes and other quirks — metadings
– metadings, Commented Aug 5, 2013 at 23:31

Community · Accepted Answer · 2017-05-23 10:25:26Z

You can build a constructor function to get an object back:

var Sentence = function (text) {
    this.text = text;
};

Now if you do

var obj = new Sentence("Hello World");

You have an obj instanceof Sentence and you can access the property like

console.log(obj.text); // prints Hello World

To "attach" this to a DOM element is a huge other answer. See this question why it's dangerous to reference the object directly on a DOMElement. Maybe you should start with jQuery.data or you make an array or another object for storing id/object tuples:

var list = [ obj0, obj1 ];

var keyValueStore = { "key0": obj0, "key1" : obj1 };

Further extending the constructor function and it's object instances:

var Sentence = function (text) {
    this.para = document.createElement("p");
    this.setText(text);
};

Sentence.prototype.setText = function (text) {
    if (this.node) {
        this.para.removeChild(this.node);
    }
    this.node = document.createTextNode(text);
    this.para.appendChild(this.node);
};

Sentence.prototype.getText = function () {
    if (this.node) {
        if (!this.node.textContent) {
            // typical IE hack
            return this.node.innerText;
        }
        return this.node.textContent;
    }
};

Usage:

window.onload = function () {

    var sentence0 = new Sentence("Hello World");

    document.body.appendChild(sentence0.para);

    setTimeout(function () {
        sentence0.setText("I'm Edward!");
    }, 5000);

};

Fiddle: http://jsfiddle.net/tfets/ (jsFiddle does auto-wrap a window.load handler).

Leonard · Accepted Answer · 2013-08-05 22:38:19Z

2

I'm afraid you haven't quite grasped how objects work in Javascript works. this.name is not the same as name which you appear to define globally. Read more about objects in Javascript at "Introduction To Object Oriented Javascript".

answered Aug 5, 2013 at 22:38

Leonard

3,0922 gold badges34 silver badges52 bronze badges

Comments

salezica · Accepted Answer · 2013-08-05 22:36:45Z

1

You are correct. HTML documents are read sequentially, and JS code is executed when found. A script inside <head> cannot access nodes inside <body>, because they haven't been read yet.

answered Aug 5, 2013 at 22:36

salezica

77.6k29 gold badges113 silver badges169 bronze badges

Comments

Mr.Web · Accepted Answer · 2013-08-05 22:52:32Z

1

Ok, if you are working with Objects use Prototype, like this:

function createSentence(paragraph){
    this.paragraph = paragraph;
}

createSentence.prototype.getString = function(){
    alert(this.paragraph);
    //Or return this.paragraph
}

var string_1 = new createSentence('my sentence');
var string_2 = new createSentence('another sentence');

string_1.getString();
//Will return 'my sentence'

string_2.getString();
//Will return 'another sentence'

answered Aug 5, 2013 at 22:52

Mr.Web

7,2078 gold badges56 silver badges90 bronze badges

Collectives™ on Stack Overflow

basic Javascript and html object execution

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related