JavaScript 中的错误:对象不是函数

2024-04-19

当我运行下面的代码时,它显示错误object is not a function在控制台中。这个错误就在这一行var todo = new Todo('contents'); in my script.js文件。我怎样才能让它发挥作用?

这是我的 todo.js 文件

var Todo = (function(c) {
var contents = $('.' + c);

var showel = function (d) {
    contents.prepend(d);
},

add = function (name) {
    if(name != "") {
        var div = $('<div class="names"></div>')
        .append('<span>' + name + '</span>')
        .append("<button class='update' class='update'>Edit</button>")
        .append("<button class='remove' name='remove'>Remove</button>");
    }

    return showel(div);
},

addUpdateField = function (dom) {
    var name = dom.parent().find('span').text(),
        field = $('<input type="text" value="' + name + '" />'),
        update = $('<button class="updateBtn">Update</button>');
    dom.parent().html('').append(field).append(update);

    return;
},

update = function(el) {
    var val = el.parent().find('input').val();
    el.parent().html('<span>' + val + '</span>')
    .append('<button class="update" class="update">Edit</button>')
    .append('<button class="remove" class="remove">Remove</button>');

    return;
},

remove = function (el) {
    return el.remove();
};

return {
    add             : add,
    update          : update,
    remove          : remove,
    addUpdateField  : addUpdateField
};
})();

这是我的 script.js 文件

$(function () {
var todo = new Todo('contents');

$('.addBtn').on('click', function() {
    var name = $(this).parent().find('input[type="text"]').val();
    todo.add(name);
});

$('.contents').on('click', '.remove', function() {
    var el = $(this).parent();
    todo.remove(el);
});

$('.contents').on('click', '.update', function() {
    var dom = $(this);
    todo.addUpdateField(dom);
});

$('.contents').on('click', '.updateBtn', function() {
    var el = $(this);
    todo.update(el);
});

});

这是html代码

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">    </script>
<script type="text/javascript" src="todo.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<title></title>
</head>

<body>
<div class="container">
    <label>Name</label>
    <input type="text" class="name" name="name" />
    <input type="button" class="addBtn" name="add" value="Add" />
    <div class="contents"></div>
</div>
</body>
</html>

您正在立即执行分配给的函数Todo。该函数返回一个对象,所以Todo指的是返回的对象,而不是函数(因此出现“不是函数”错误)。

我假设你的意图是这样的:

var Todo = function () {

    this.add = function () { //Note the use of `this` here
        //Do stuff
    };
    //etc...

}; //No self-invoking parentheses here

Now, Todo指的是一个构造函数,您可以使用new运算符,正如您当前正在尝试做的那样。

另请注意,此模式将导致每个实例Todo每个方法都有一个单独的副本,这不是很有效。最好将方法声明为prototype:

var Todo = function () {
    //Initialize the Todo instance
};
Todo.prototype.add = function () {
    //Do stuff
};

现在,所有实例Todo将共享方法的单个副本。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 中的错误:对象不是函数 的相关文章

  • Sequelize - 使用 es6 和模块运行迁移

    我不确定我是否做错了什么或者什么 我觉得我正在运行一个现代的 相当常见的堆栈 但我无法让新的 Sequelize v6 与我的设置完美配合 我在 Node v14 17 Sequelize v6 6 2 上 在我的 package json
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • 在动态创建的元素上添加事件监听器[重复]

    这个问题在这里已经有答案了 是否可以向所有动态生成的元素添加事件侦听器 Javascript 我不是页面的所有者 因此我无法以静态方式添加侦听器 对于页面加载时创建的所有元素 我使用 doc body addEventListener cl
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 为什么我们使用 SpreadsheetApp.flush()?

    我的理解是 flush https developers google com apps script reference spreadsheet spreadsheet app flush有助于在功能发生时执行这些功能 而无需将它们捆绑在
  • setInterval() 在用户离开选项卡时暂停?

    javascript 中是否有任何方法的行为类似于 setInterval 并且当用户离开选项卡时停止并在用户再次进入选项卡时恢复 您可以使用以下方法创建自己的 API可见性API https developer mozilla org e
  • 避免在 ES6 的函数内定位 this 的对象作用域

    例如 我正在使用 D3 js 运行一个项目 导入特定模块并调用它们的函数 Setup TypeScript ES6 导入特定的 D3 组件 角6 我有一个对象 在本例中是一个角度指令 并在 SVG 画布上绘制一些圆圈 并希望它们在拖动事件上
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • “|”是什么意思(单管道)在 JavaScript 中做什么?

    console log 0 5 0 0 console log 1 0 1 console log 1 0 1 为什么0 5 0返回零 但任何整数 包括负数 都返回输入整数 单管道 有什么作用 这是一个按位或 https developer
  • 带有 mkdocs 的本地 mathjax

    我想在无法访问互联网的计算机上使用 MathJax 和 Mkdocs 因此我不能只调用 Mathjax CDN Config mkdocs yml site name My Docs extra javascript javascripts
  • Firebase 身份验证在 iOS 登录时卡住,没有错误

    我已经使用电子邮件和密码设置了 firebase 身份验证登录的最基本实现 firebase auth signInWithEmailAndPassword email password then gt console log Logged
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • Outlook 加载项,无法读取未定义的属性“BeginRequestEventArgs”

    我使用 Visual Studio 开发了 Outlook 插件 我的插件有一个按钮 用于填充会议邀请正文中的详细信息并添加所需的与会者 这在 99 的情况下都有效 但是 时不时地它会给我下面的 JavaScript 错误 Uncaught
  • 不使用控件时,视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时
  • 具有固定顶部菜单的语义 UI 侧边栏

    Semantic UI 对其进行预警侧边栏页面 http semantic ui com modules sidebar html usage 当侧边栏出现时 固定位置内容可能会出现改变其位置的问题 然后它提供了该问题的两种可能的解决方案
  • 在方法内部执行方法

    我目前正在 FreeCodeCamp 中进行 JavaScript 练习 我的代码应该使用的测试用例之一是函数调用 如下所示 addTogether 2 3 这是我得到的基本功能 function addTogether return 当我
  • 搜索多维数组 JavaScript

    我有一个如下所示的数组 selected products 0 r1 7up 61 Albertsons selected products 1 r3 Arrowhead 78 Arrowhead selected products 2 r
  • 如何获得 JavaScript 阶乘程序的循环来显示所使用的工作?

    你好 我面临着用 JavaScript 编写一个程序的挑战 尽管我对它不太了解 但它要求用户输入一个数字 然后计算该数字的阶乘 我使用了已经提出的问题并设法使计算正常工作 但无法获得所需的输出 我必须在以下输出中获取它 而不使用任何花哨的库
  • 用javascript调用外部网页(跨域)

    我正在尝试使用以下网络服务来验证提要这个问题 https stackoverflow com questions 11996430 check if a url is a valid feed 但浏览器不允许我向另一台服务器发送 ajax
  • JQuery 删除和内存泄漏

    我正在开发一个游戏 我看到了很多内存消耗 我使用jquery animate 动画完成后 我 remove 元素 我的问题是 从 dom 树中删除一个元素后 对象还存在记忆中吗 Javascript 是一种垃圾收集语言 这意味着当没有代码保

随机推荐

  • iOS 捏合缩放和两指同时旋转

    这是我的代码 视图加载 UIPinchGestureRecognizer pinch UIPinchGestureRecognizer alloc initWithTarget self action selector pinch self
  • Applescript 从同一目录运行 bash 脚本

    我正在尝试构建一个 AppleScript 来启动我的 shell 脚本 路径结构如下 Users ryan myscript applescript scpt bash sh 我的AppleScript如下 tell applicatio
  • glDrawElements 在 PyOpenGL 中绘制立方体

    我最近开始通过 Python 学习 OpenGL 这要归功于几个教程 尤其是 Nicolas P Rougier 的教程 http www labri fr perso nrougier teaching opengl http www l
  • Inno Setup 选择一个目录来安装预定义集中的文件

    在这种情况下 我需要将文件安装到特定目录 但在不同的计算机上它可能位于不同的文件夹中 所以我需要检查哪个是正确的 例如 我有一个文件 需要将其安装在A文件夹或B文件夹或C文件夹 取决于计算机有A or B or C 所以我需要先检查一下计算
  • TFS 重新成为孙子

    几天来我一直在尝试一切我能想到的方法来让它发挥作用 无基础的合并 重新设置父级 分支然后重新设置父级 我想重新设置一个分支的父级 使其成为其中一个子级的子级 并打破该分支与其父级之间的关系 在下图中 我想将 Cassidy Main 和 B
  • Android 获取日期并插入到文件名

    我有一个非常烦人的问题 我想获取当前日期 时间并将其插入文件名中 但我一生都无法让它工作 我想获取 2011 11 18 12 13 57 的时间 然后将其插入到我的文件名中 文件名 2011 11 18 12 13 57 tar gz 我
  • 如何通过单击超链接打开文件

    我有这张桌子 我想单击链接 文件 无论什么文件 将在新的弹出窗口中打开 这是我的代码
  • 将 SVG 从文件加载到画布并取消分组

    我使用 FabricJS 和函数将 SVG 文件上传到画布 fabric loadSVGFromURL url function objects options group fabric util groupSVGElements obje
  • Linux 上共享串口

    我正在使用 Raspberry Pi 进行一个项目 该项目需要能够写入和读取串行端口 但来自不同的程序 程序 A 需要能够从外围设备 A 正在发送数据的串行端口读取数据 程序B需要向串口写入数据 外设B正在监听串口 供参考 本例中程序A是G
  • 将 matlab 中的 find() 转换为 python

    我正在将代码从 Matlab 转换为 Python Matlab中的代码为 x find sEdgepoints gt 0 sNorm lt lowT sEdgepoints x 0 两个数组的大小相同 我基本上是在创建一个掩码 I rea
  • Xcode 14.0 - PackageIndex.findPackages 失败:featureDisabled 警告

    自从我升级到 Xcode 14 0 后 我收到以下警告 PackageIndex findPackages failed featureDisabled 网络搜索没有得到任何结果 我有一个SPM包 但似乎没有任何问题 有人知道如何摆脱这个警
  • 如何在部署的appengine数据库上的eclipse中调试服务器代码?

    我在 Eclipse 中有一个 Google AppEngine Java 项目 我想在 Eclipse 中调试本地代码 但使用 AppEngine 上部署的数据库 到目前为止 我使用带有用户名 密码的远程 API 旧方式 此方法将被弃用
  • 如何获取批处理文件中的字符串长度?

    似乎没有一种简单的方法可以获取批处理文件中字符串的长度 例如 SET MY STRING abcdefg SET A MY STRING LEN 我如何找到字符串的长度MY STRING 如果字符串长度函数处理字符串中所有可能的字符 包括转
  • Chrome 扩展 + 网页视图

    我正在努力寻找这个问题的明确答案 除 Chrome 操作系统外 所有操作系统均已弃用 Chrome 应用 只能在 Chrome 应用中使用 这意味着我不能或不应该在扩展中使用 如果可能 根据进一步的研究 测试和评论 绝对不能在扩展中使用 只
  • postbuild UIAutomation 脚本未在 jenkins 中运行

    我正在尝试做端到端自动化 for an iOS项目 我的目标是自动化持续集成处理与附加UIAutomation脚本作为构建后操作 因此 从用户在 SVN 中检查他的代码开始 直到我们得到自动化测试结果 一切都将是自动化的 Jenkins安装
  • 使用 fb_graph Ruby gem 从 Facebook 检索好友位置

    我正在尝试使用 gem 检索用户所有朋友的位置 fb graph https github com nov fb graph 版本1 7 2 我的权限是 发布流 读取好友列表 离线访问 好友位置 用户位置 我已经对用户进行了身份验证并存储了
  • “不支持”在不指定 RuntimeIdentifier 的情况下构建或发布独立的应用程序

    使用最新的 Visual Studio 2019 我尝试发布 DotNetCore 3 1 WPF 应用程序的 Msix 安装程序 应用程序构建并正确运行 但是当我尝试发布应用程序时出现此错误 It is not supported to
  • 迭代 DFS 与递归 DFS 以及不同的元素顺序

    我编写了一个递归 DFS 算法来遍历图 void Graph
  • eclipse 烦恼:调试和启动工具栏不可用

    我正在运行 Windows XP 和 Eclipse 4 2 2 Build id M20130204 1200 并且我丢失了调试和启动工具栏 我尝试过 Windows gt 重置透视 原始值 和窗口 gt 自定义透视 工具栏可见性和命令组
  • JavaScript 中的错误:对象不是函数

    当我运行下面的代码时 它显示错误object is not a function在控制台中 这个错误就在这一行var todo new Todo contents in my script js文件 我怎样才能让它发挥作用 这是我的 tod