JavaScript Uncaught TypeError: Object [object global] has no method

Question

I am trying to make a basic JavaScript 'library' / tool which helps the user change items using their IDs. I have tried a basic function, but I get the error Uncaught TypeError: Object [object global] has no method 'val', and I am not sure why:

lib.js

function $id(id)
{
    if(id)
    {
        this.elem = document.getElementById(id);
        return this;
    }
    else
    {
        console.log("No ID found when using $id(...)");
    }
}
$id.prototype = 
{
    val: function()
    {
        return this.elem.value;
    },
    set: function(v)
    {
        this.elem.value = v;
    },
    destroy: function()
    {
        this.elem.parentNode.removeChild(this.elem);
    }

}

index.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript">
alert($id("myDiv").val());
</script>
</head>
<body>
<div id="myDiv">
Hello
</div>
</body>
</html>

Please try alert(new $id("myDiv").val());

Piyuesh
– Piyuesh

2014-01-24 16:30:12 +00:00
Commented Jan 24, 2014 at 16:30 — Piyuesh
– Piyuesh, Commented Jan 24, 2014 at 16:30

Marc · Accepted Answer · 2014-01-24 16:40:39Z

You have a few small issues within your code above.

First, to directly answer your question: you need to use "new" when attempting to output the result, as follows:

alert(new $id("myDiv").val());

Second, you will need to place the script tag that outputs the value below the element being referenced. With your current example, the "myDiv" element does not yet exist in the DOM when the script is run.

Finally, to get the contents of a DIV, getting the value will return null. Rather, you need to get the innerHTML of the element.

Here's an updated version of your code to achieve the result that I believe you are hoping for:

<!DOCTYPE html>
<html>
<head>
<script>
function $id(id)
{
    if(id)
    {
        this.elem = document.getElementById(id);
        return this;
    }
    else
    {
        console.log("No ID found when using $id(...)");
    }
}
$id.prototype = 
{
    html: function()
    {
        return this.elem.innerHTML;
    },
    set: function(v)
    {
        this.elem.value = v;
    },
    destroy: function()
    {
        this.elem.parentNode.removeChild(this.elem);
    }

}
</script>
</head>
<body>
<div id="myDiv">Hello</div>
<script>alert(new $id("myDiv").html());</script>
</body>
</html>

dee-see · Accepted Answer · 2014-01-24 16:48:18Z

2

Invoking $id(...) instead of new $id(...) means that the function doesn't act like a construction and you don't have access to the prototype.

Try this

alert(new $id("myDiv").val());

See Inheritance and the prototype chain on MDN.

As mentioned in the comments, .value is undefined on your div and event if it "works", your alert box will show undefined. You might be looking for .innerHTML.

Here's a Fiddle.

edited Jan 24, 2014 at 16:48

answered Jan 24, 2014 at 16:30

dee-see

24.1k6 gold badges63 silver badges92 bronze badges

2 Comments

dee-see Over a year ago

@SumanBogati It works here: jsfiddle.net/r4zNN/1 It alerts undefined but that's because value is undefined on that element. OP would have to change that to innerHTML or whatever else he wants to access with .val...

Suman Bogati Over a year ago

Oh..undefined did confuse me.

Collectives™ on Stack Overflow

JavaScript Uncaught TypeError: Object [object global] has no method

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related