如何仅使用javascript在短时间内更改点击时的按钮文本?

2024-03-20

我正在制作一个购物车网站,我想要我的添加到购物车按钮说添加项目单击它后,但只持续大约 2 秒,然后它会变回添加到购物车。我该如何实现这一目标?


在纯 JavaScript 中,您可以使用变量来检查按钮是否被单击,如果没有,则将按钮设置为所需的字符串,并在两秒后将其更改回来。

document.getElementById('button').addEventListener('click', function (clicked) {
    return function () {
        if (!clicked) {
            var last = this.innerHTML;
            this.innerHTML = 'Item added';
            clicked = true;
            setTimeout(function () {
                this.innerHTML = last;
                clicked = false;
            }.bind(this), 2000);
        }
    };
}(false), this);
<button id="button">Add to Cart</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何仅使用javascript在短时间内更改点击时的按钮文本? 的相关文章

  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • 如何在react-native中获取Text组件的onPress值

    我是一名新的 React Native 开发人员 我想使用 onPress 获取 Text 组件的值并将其传递给函数
  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • 如何使用 JQuery 动态排序

    如果我有一个下拉列表和一个列表框 有没有办法使用 JQuery 根据下拉列表对列表框进行排序 举个例子会很有帮助 这会改变下拉菜单中的顺序 您必须根据自己的标准设置顺序
  • 使用 JQuery 更改元素的顺序

    有人知道我做错了什么吗 我正在尝试更改某些图像的显示顺序 我希望每次按下按钮时图像都会向右 向左移动一个位置 这是我尝试过的 但没有运气 任何帮助或见解将不胜感激 rightShift click function img hide var
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • jQuery 对象相等

    如何确定两个 jQuery 对象是否相等 我希望能够在数组中搜索特定的 jQuery 对象 inArray jqobj my array 1 alert deviceTypeRoot deviceTypeRoot False alert d
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如
  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

  • 使用 Gulp 将 browserify 模块设为外部

    我有一个图书馆lib js我想从中创建lib a js and lib b js并能够从脚本中使用它client js using var a require lib a js 当我只包含已编译的内容时它就可以工作lib js之前的图书馆c
  • 在 Google Apps 脚本中比较日期范围与今天的日期

    我希望使用这篇文章作为参考 将从电子表格中提取的日期与今天的日期进行比较 如何使用 Google Apps 脚本将日期与电子表格进行比较 https stackoverflow com questions 14350671 how do i
  • 访问派生类中的基类成员

    我有一个简单的课程如下 class A protected int x class B public A public int y void sety int d y d int gety return y int main B obj o
  • JetBrains Toolbox 应用程序在 Windows 上为空白

    我在 Windows 10 上安装了 JetBrains Toolbox 应用程序 但是当我启动它时 它只显示一个空白边框 如下所示 我尝试重新安装它但仍然不起作用 有人知道如何解决这个问题吗 看起来类似于ALL 1419 https yo
  • 那么如何通过终端打开Android SDK Manager呢? [复制]

    这个问题在这里已经有答案了 我已经将 CD 放入终端中的 android 工具目录中 我尝试输入 android 并按回车键 我也尝试输入 android sdk 并按回车键 但 sdk 管理器不会出现 有什么解决方案或建议可以帮助我了解我
  • HTML5 Canvas 形状从圆形到三角形

    我一直在环顾四周 似乎找不到一种清晰的方法来使形状从圆形变为三角形或矩形或相反 我假设我可以以某种方式存储形状并更改其属性以转换它 基本上我要问的是 如何绘制一个圆形 然后单击按钮将其动画化为三角形 画布形状可以吗 Thanks 您可以使用
  • “启动失败。未找到二进制文件。” Snow Leopard 和 Eclipse C/C++ IDE 问题

    不是问题 我刚刚在互联网上搜索了这个问题的解决方案 并认为我会与 SO 的好人分享 我会用通俗易懂的语言来表述 以便新手也能理解 如果这是错误的地方 我们深表歉意 只是想提供帮助 几乎所有尝试使用 Eclipse C C IDE 的 OS
  • 扩展现有协议以符合另一个协议

    你好 我的目标是扩展 在 swift 3 中 我在框架中拥有的协议 以符合另一个协议 protocol SomeProtocol protocol SomeOtherProtocol extension SomeOtherProtocol
  • R:绘制 igraph 时选择性显示节点

    如何绘制 igraph 节点的选择 我有一个现有的图表 但它太复杂了 我希望能够 放大 节点的子集 我能够删除边缘的子集 但我不知道如何 关闭 孤立的节点 当使用network包 该displayisolates FALSE参数执行此操作
  • Typescript 类可以实现可调用接口吗?

    Typescript 接口允许定义函数风格的调用签名 因此 interface A x number number 这可以通过例如一个函数 const a A function x number number return 1 是否可以使用
  • 如何以编程方式绑定 DataTemplate 内控件的(依赖项)属性?

    The TextBlock居住在一个DataTemplate 因此我无法通过其名称来引用它 那么我该如何绑定它 例如 Text以编程方式属性 XAML
  • Java 组件(JRE、JDK、JVM、JIT 和 javac)之间有什么区别?

    我很难理解两者之间的区别JVM Java虚拟机 JRE Java运行时环境 JDK Java 开发工具包 JIT 即时编译器 以及javac Java 编译器 所有这些之间的良好比较和对比是什么 您可能已经在 google 上搜索了很多次来
  • LINQ to SQL - 一对一关联的问题

    在 L2S 设计器中 我删除了一个表和一个视图 我尝试在两者的主键上添加关联 这应该是一对一的关系 所以我这样设置关联的基数属性 但是 在编码时我无法访问子属性 有什么建议么 Edit I just created a view in sq
  • 如何在 MySQL *Prepared* 存储过程中使用多个参数

    尽管有一些在 MySQL 存储过程中使用多个参数的很好的示例 但我一直无法找到一个简单的示例来说明如何在存储过程中使用它们prepared 下面的代码返回 Incorrect arguments to EXECUTE 使用以下方式调用它时
  • 我如何知道谁调用了 System.gc()?

    在正在运行的系统中 我们会看到很多 Full GC System 这表明有人触发了 System gc 有没有办法找出代码中发生这种情况的位置 我确实搜索了所有可用的源 但没有发现任何可疑的东西 因此它一定在某个地方 可能是在同一容器或容器
  • django隐藏所有表单错误

    有没有办法向用户隐藏所有表单错误消息 我显示自己的消息 而错误消息显示在表单字段之间的事实对我来说没有用 您可以自己渲染模板 并忽略错误 请参阅文档自定义表单模板 https docs djangoproject com en dev to
  • PySpark NoSuchMethodError:将数据插入数据库时​​sun.nio.ch.DirectBuffer.cleaner

    我在尝试将大型数据帧插入 Postgres 时收到此错误 NoSuchMethodError sun nio ch DirectBuffer cleaner 这是一个完整的错误 之前有很多操作 所以没有理由将它们附加到问题中 您能否给一些建
  • Lambda“if”语句?

    我有 2 个对象 我想将它们转换为字典 我使用 toDictionary 一个对象获取密钥的 lambda 表达式是 i gt i name 对于另一个 它是 i gt i inner name 在第二个中 i name 不存在 如果 i
  • 如何使用 mvvm 禁用文本块?

    如何使用 mvvm 禁用文本块 我对我尝试过的这种架构很陌生IsEnabled Binding IsEnable i e XAML
  • 如何仅使用javascript在短时间内更改点击时的按钮文本?

    我正在制作一个购物车网站 我想要我的添加到购物车按钮说添加项目单击它后 但只持续大约 2 秒 然后它会变回添加到购物车 我该如何实现这一目标 在纯 JavaScript 中 您可以使用变量来检查按钮是否被单击 如果没有 则将按钮设置为所需的