Question

我正在尝试制作一个基本的JavaScript'库'/工具，帮助用户使用他们的ID更改项目。我尝试了一个基本功能，但是我收到错误Uncaught TypeError: Object [object global] has no method 'val'，我不确定原因：

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>

Answer 1

您的代码中有一些小问题。

首先，直接回答您的问题：在尝试输出结果时需要使用“new”，如下所示：

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

其次，您需要放置脚本标记，该标记输出下面的值被引用的元素。在当前示例中，运行脚本时，“myDiv”元素在DOM中尚不存在。

最后，要获取DIV的内容，获取该值将返回null。相反，你需要获得元素的innerHTML。

这是您的代码的更新版本，以实现我相信您希望的结果：

<!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>

Answer 2

调用$id(...)而不是new $id(...)意味着该函数不像构造那样，并且您无权访问原型。

试试这个

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

请参阅MDN上的Inheritance and the prototype chain。

正如评论中所述，.value上的div未定义，如果“有效”，则系统会显示undefined。您可能正在寻找.innerHTML。

这是Fiddle。

JavaScript Uncaught TypeError：Object [object global]没有方法

2 个答案: