Can a method (prototype) of a user defined javascript object use the document.createElement?

Question

I'm trying to learn about user-defined objects in JavaScript. Specifically, I'm trying to create a method of a user-defined object that will use the document.getElementById("holder") and append to it using document.createElement('p') and append to it a text node with document.createTextNode("text").

Currently, my method is not doing that. I've tested the method and it is getting called, but nothing appears in the page from the item.appendChild(otheritem). I've looked through other posts but none explained my situation, at least that I am aware of. My code is below.

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function Person(fn, ln) {
                this.fname = fn;
                this.lname = ln;
            }
            Person.prototype.getFullName = function () {
                var myPara = document.createElement('p');
                var strFullName = document.createTextNode("super");
                myPara.appendChild(strFullName);
                var objHolder = document.getElementById("objHolder");
                objHolder.appendChild(myPara);
            };

            function getSome() {
                var fN = document.getElementById("fname").value;
                var lN = document.getElementById("lname").value;
                var Myperson = new Person(fN, lN);
                alert(Myperson.fname);
                Myperson.getFullName();
            }
        </script>
    </head>
    <body>
        <form id="holder">First Name:
            <input id="fname" type="text" width="40" />Last Name:
            <input id="lname" type="text" width="40" />
            <button id="buildObj" value="Click" onClick="getSome()">Click</button>
        </form>
        <div id="objHolder"></div>
    </body>
</html>

Any help or recommendations would be appreciated. Also, if I'm missing a key concept, knowing that would be good too.

Thanks, Mike

Why it is named getFullName when it doesn't return anything and have side-effects? you should rename it to something appropriate e.g. createNameElem — Anurag Uniyal
– Anurag Uniyal, Commented Oct 31, 2012 at 19:22
To answer your title question: Yes, of course it can. Why shouldn't it? — Bergi
– Bergi, Commented Oct 31, 2012 at 19:22

meder omuraliev · Accepted Answer · 2012-10-31 19:18:10Z

2

The append works but at the same time the form is submitted, so it redirects to another page. You need to cancel the natural browser behaviour of submitting the form via return false in an event handler for the submit event.

<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script type="text/javascript">
function Person(fn,ln) {
this.fname = fn;
this.lname = ln;
}

Person.prototype.getFullName = function()
{

var myPara = document.createElement('p');
var strFullName = document.createTextNode("super");myPara.appendChild(strFullName);
var objHolder = document.getElementById("objHolder");objHolder.appendChild(myPara);
};

function getSome(){
var fN = document.getElementById("fname").value;
var lN = document.getElementById("lname").value;

var Myperson = new Person(fN,lN);
alert(Myperson.fname);
Myperson.getFullName();
}
</script>
</head>
<body>
<form id="holder">
First Name: <input id="fname" type="text" width="40" />
Last Name: <input id="lname" type="text" width="40" />
<button id="buildObj" value="Click" onClick="getSome()">Click</button>
</form>
<div id="objHolder">
</div>
<script>
document.getElementById('holder').onsubmit=function(){ return false; }
</script>
</body>
</html>

The more elegant method is to use the event object and then call event.preventDefault but due to browser inconsistencies it takes a lot of code to get it right.. so for this basic example, onsubmit and return false should suffice.

answered Oct 31, 2012 at 19:18

meder omuraliev

187k76 gold badges402 silver badges443 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M_66 Over a year ago

Thank you! That was what I was looking for. I didn't realize that it was trying to go to another page. I still have lots of learning to do. Thanks again!

Collectives™ on Stack Overflow

Can a method (prototype) of a user defined javascript object use the document.createElement?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related