开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我的按钮不是由p5js创建的，我使用了带有循环()的addEventListener " click“事件，但是当我单击该按钮时，循环只运行一次

根据您的描述，您遇到的问题是当单击一个不是由p5js创建的按钮时，循环只运行一次。这可能是因为您的循环代码只在按钮被单击时运行一次，而不是持续运行。

要解决这个问题，您可以尝试以下几种方法：

确保循环代码被正确地绑定到按钮的点击事件上。您可以使用addEventListener方法来绑定点击事件，并在事件处理程序中执行循环代码。确保您的循环代码位于事件处理程序内部。
检查循环代码是否正确设置了循环条件。循环代码应该包含一个条件，以便在满足条件时重复运行。如果条件不正确设置，循环可能只运行一次。
确保您的循环代码没有被其他代码块或条件语句所阻塞。如果您的循环代码被其他代码块包围或嵌套在条件语句中，它可能只会运行一次或根本不运行。请检查您的代码结构，确保循环代码没有被阻塞。
如果您使用的是p5js库以外的其他库或框架，确保它们与您的循环代码兼容。有时不同的库或框架可能会有冲突或不兼容的问题，导致循环代码无法正常运行。请查阅相关文档或社区支持，以确保您的代码正确使用了这些库或框架。

总结起来，您需要确保循环代码正确地绑定到按钮的点击事件上，并且循环条件正确设置，同时避免被其他代码块或条件语句所阻塞。如果问题仍然存在，您可以提供更多的代码细节或上下文信息，以便更好地帮助您解决问题。

腾讯云相关产品和产品介绍链接地址：

云函数（Serverless）：https://cloud.tencent.com/product/scf
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云服务器（CVM）：https://cloud.tencent.com/product/cvm
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙解决方案：https://cloud.tencent.com/solution/virtual-universe

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何制作自己的原生 JavaScript 路由

那么该怎么实现呢？我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。简介我遇到了很多出于各种原因想要自己创建路由的人。...这就是使浏览器无需重新加载页面即可更改 URL 的原因。结果:现在，每次我们单击按钮时，URL 实际上都会在浏览器的地址栏中更改。内容框也会更新。 ? 我们的原生 JS 路由开始运行了。...这样做会产生 popstate事件。这是你必须再次更新视图的部分。（第一次是我们单击按钮时。）...但是由于该事件带有单击的 id，因此单击 Back 或 Forward 时很容易刷新视图并重新加载内容。...假定每次你导航到出现在路由按钮上的 URL 时，实际上都会从服务器单独加载该 URL。因此你有责任确保/page/about 将路由器和页面的加载到应用程序的根视图中。

3.8K2 0

用纯 JavaScript 撸一个 MVC 框架

我不打算再写CSS了，因为它不是本文的重点。好的，现在我们有了HTML和CSS，下面该开始编写程序了。入门我会使这个教程简单易懂，使你轻松了解哪个类属于 MVC 的哪个部分。...我将创建一个 Model 类，View 类和 Controller 类。该程序将是控制器的实例。...当你提交新的待办事项、单击删除按钮或单击待办事项的复选框时，将触发一个事件。视图必须侦听这些事件，因为它们是视图的用户输入，它会将响应事件所要做的工作分配给控制器。我们将为事件创建 handler。...首先，提交一个 handleAddTodo 事件，当我们创建的待办事项输入表单被提交时，可以通过按 Enter 键或单击“提交”按钮来触发。这是一个 submit 事件。...它将响应删除按钮上的 click 事件。删除按钮的父元素是 todo li 本身，它附有相应的 id。我们需要将该数据发送给正确的模型方法。

3.2K4 1

8 个 DOM 功能

/EventTarget/addEventListener#Parameters】 once — 布尔值，如果设置为 true，则表示该事件应仅在目标元素上运行一次，然后被删除 passive — ...如果将 once 值改为 false，则多次单击该按钮，每次单击按钮时都会附加文本。...如果使用 setTimeout() 将只运行一次，而在当前这种情况下，它会无限期地运行，直到我在传入 timer 变量时调用 window.clearTimeout()。这很简单。...这是一个 CodePen 演示，演示了如何使用 setTimeout()： CodePen：https://codepen.io/impressivewebs/pen/PgoNEj 单击该按钮时，将会使用传入的两个值进行计算...但是，如果由于某种原因我想使文本节点分开，但我仍然希望能够将文本作为一个单元抓取，那么 wholeText 就是有用的。因此我可以在相邻的文本节点上执行此操作，而不是调用 normalize()。

1.8K2 0

【JS】328- 8个你不知道的DOM功能

（'click'，doSomething，false）; 第一个元素是我们要监听的事件，第二个元素是事件触发时的回调函数，第三个参数是一个布尔值用来标识事件在捕获还是冒泡阶段触发。...对于 setTimeout() 来说，这个只会运行一次，而在这种情况下，他将无限期运行，直到我在传入计时器的时候调用 window.clearTimeout()。...要求将事件传递到函数中，因为调用了 preventDefault() 方法。但是你可以用那个 event 对象做更多的事情。...事实上，当使用某些事件（例如 click、 dbclick 、mouseup、mousedown ）时，这些事件称为 uievent 接口的内容。...我将 blur 和 focus 包括在内，以证明这些不符合条件，并且始终返回0（即不单击）像IE11这样的老浏览器有非常不一致的行为请注意，该演示包含了一个很好的用例，用于演示-模拟三次单击事件的能力

1.4K1 0

JavaScript 编程精解中文第三版十五、处理事件

这适用于大多数类型的事件 - 您可以为属性附加处理器，属性名称为前面带有on的事件名称。但是一个节点只能有一个onclick属性，所以你只能用这种方式为每个节点注册一个处理器。...如果你点击你的屏幕，你会得到'mousedown'，'mouseup'和'click'事件。但是这种错觉不是很健壮。...鼠标事件只涵盖了简单情况下的触摸交互 - 如果您为按钮添加"click"处理器，触摸用户仍然可以使用它。但是像上一个示例中的可调整大小的栏在触摸屏上不起作用。触摸交互触发了特定的事件类型。...其效果是让我们的进度条呆在最顶上。改变其宽度来指示当前进度。在设置宽度时，我们使用%而不是px作为单位，使元素的大小相对于页面宽度。...事件和事件循环在事件循环的上下文中，如第 11 章中所述，浏览器事件处理器的行为，类似于其他异步通知。它们是在事件发生时调度的，但在它们有机会运行之前，必须等待其他正在运行的脚本完成。

5.5K2 0

《JavaScript 模式》读书笔记（8）— DOM和浏览器模式1

当将文档碎片添加到DOM树时，不是将碎片本身添加到DOM树中，而是将文档碎片的内容添加进DOM树中。该操作是十分方便的。...事件处理通常事件处理是通过为元素附加事件监听器来实现的，例如有一个按钮，该按钮在每次单击后都会增加一次计数。...让我们假定有多个按钮，并且这些按钮共享同一个myHandler()函数。考虑到可以从每次点击时创建的事件对象中获取数值，因此为每个数值维持按钮节点和计数器之间引用是十分低效的。　　...在当前特定的范例中，这一部分可以省略，不是必须的。但是通常如果不这样做，会导致事件传播到根文档，甚至是传播到window对象中。...事件授权的缺点在于如果碰巧没有感兴趣的事件发生，那么增加的小部分代码就显得没用了。但是采用该模式所获的收益（性能和更为清晰的代码）远远大于缺点，因此强烈推荐使用该模式。

8943 0

探索v8源码：事件循环 Microtasks (微任务)

点击上方蓝字，发现更多精彩导语 Microtasks（微任务）是事件循环中一类优先级比较高的任务，本文通过一个有趣的例子探索其运行时机。...手动点击按钮// button.click() // 2. 解开这句注释，用JS触发点击行为当我手动点击按钮的时候，大家觉得浏览器的输出是下面的A还是B？...大家觉得上面1、2两种情况的输出顺序是否一样？答案非常有意思当我们使用1. 手动点击按钮时，浏览器的输出是A 当我们使用2....从上图中我们可以看到，浏览器运行JS代码时，调用了 button.click 这个函数进入事件处理，执行 listener1，输出 listener1。...目前 Node 是使用了这种策略。 scoped模式下，由 MicrotasksScope控制，但作用域失效时，在其析构函数中运行 Microtasks。

1.6K8 1

前端成神之路-WebAPIs04

案例：发送短信倒计时点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。 ?...var time = 3; // 注册单击事件 btn.addEventListener('click', function() { //...，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。...为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。...1.3.3 JS执行机制（事件循环） ?

1.5K1 0

【译】JavaScript中的Callbacks

如果你不是很熟悉它们，我建议你在往下读之前复习一下ES6这篇文章（只了解箭头函数部分就可以了）。 callbacks是什么？ callback是作为稍后要执行的参数传递给另一个函数的函数。...JavaScript监听按钮上的click事件。...让我们把愚蠢的机器人助手放到浏览器的上下文中。想象一下，当单击按钮时，你告诉它更改按钮的颜色。这个愚蠢的机器人会做什么？它专注于按钮，忽略所有命令，直到按钮被点击。同时，用户无法选择任何其他内容。...这就是异步编程在JavaScript中如此重要的原因。但是，要真正了解异步操作期间发生的事情，我们需要引入另外一个东西 -- 事件循环。...queue image.png JavaScript的事件循环如果你有20分钟的空余时间，我强烈建议你观看Philip Roberts 在JSconf中谈论的事件循环。

8792 0

JavaScript中的Callbacks

如果你不是很熟悉它们，我建议你在往下读之前复习一下ES6这篇文章（只了解箭头函数部分就可以了）。 callbacks是什么？ callback是作为稍后要执行的参数传递给另一个函数的函数。...监听按钮上的click事件。...让我们把愚蠢的机器人助手放到浏览器的上下文中。想象一下，当单击按钮时，你告诉它更改按钮的颜色。这个愚蠢的机器人会做什么？它专注于按钮，忽略所有命令，直到按钮被点击。同时，用户无法选择任何其他内容。...其他所有内容完成后，JavaScript就会去布置桌面（layTheTable）我的朋友，这个就被称为事件循环。...queue JavaScript的事件循环如果你有20分钟的空余时间，我强烈建议你观看Philip Roberts 在JSconf中谈论的事件循环。

4774 0

「Web编程API」- 04

} }) 1.1.4 案例：模拟京东快递单号查询要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。...var time = 3; // 注册单击事件 btn.addEventListener('click', function() { // 禁用按钮...，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。...该对象包含用户（在浏览器窗口中）访问过的URL。 history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。 1.3. JS执行机制以下代码执行的结果是什么？...为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。

8742 0

js垃圾回收与内存泄漏

其原理是：垃圾收集器会定期（周期性）找出那些不再继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大并且 GC 时停止响应其他操作，所以垃圾回收器会按照固定的时间间隔周期性的执行。...当引用计数为0时，表示该对象不再被使用，可以被回收。但是，引用计数算法无法解决循环引用问题。如果两个或多个对象相互引用，并且没有其他地方对它们进行引用，则它们的引用计数永远不会为0，导致内存泄漏。...未释放的DOM元素事件监听器const button = document.querySelector("#myButton")button.addEventListener("click", () =...如果我们忘记在不再需要该按钮时移除事件监听器，该按钮元素将继续保持对事件监听器的引用，导致内存泄漏。...("click", handleClick)// 在不再需要按钮时移除事件监听器button.removeEventListener("click", handleClick)在上述代码中，我们使用 addEventListener

1706 0

《JavaScript 模式》读书笔记（8）— DOM和浏览器模式1

当将文档碎片添加到DOM树时，不是将碎片本身添加到DOM树中，而是将文档碎片的内容添加进DOM树中。该操作是十分方便的。...事件处理通常事件处理是通过为元素附加事件监听器来实现的，例如有一个按钮，该按钮在每次单击后都会增加一次计数。...让我们假定有多个按钮，并且这些按钮共享同一个myHandler()函数。考虑到可以从每次点击时创建的事件对象中获取数值，因此为每个数值维持按钮节点和计数器之间引用是十分低效的。　　...在当前特定的范例中，这一部分可以省略，不是必须的。但是通常如果不这样做，会导致事件传播到根文档，甚至是传播到window对象中。...事件授权的缺点在于如果碰巧没有感兴趣的事件发生，那么增加的小部分代码就显得没用了。但是采用该模式所获的收益（性能和更为清晰的代码）远远大于缺点，因此强烈推荐使用该模式。

8362 0

13事件

（例如单击事件是 click等） functionName：注册事件的句柄事件中的this，当使用 addeventlistener()方法为某个HTML页面元素注册事件的时候，this就指代注册事件的元素...flkc为默认值，表示冒泡阶段 Even事件对象为HTML页面中的元素注册事件时，事件的处理函数具体一个参数，该参数就是 Event事件对象Event事件对象中包含了该事件的信息，以及该事件发生在哪个元素上...='submit'>提交按钮时，提交表单功能输入框的输入文本内容功能单选框或复选框的切换选项功能。...事件流捕获阶段（网景公司提出）按照DOM树结构由 documenti对象向下的顺序传播，直到目标元素为止目标阶段该阶段就是指目标元素触发当前事件。...因为注册事件已经委托给了该元素的祖先元素完成。简化逻辑代码这种方式只需要祖先元素一次注册事件，而不需要分别为大量元素注册事件。

7473 0

jQuery 事件绑定和 JavaScript 原生事件绑定

该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。...提示：如需移除事件处理程序，请使用 off() 方法。提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。 event：必需。规定要从被选元素移除的一个或多个事件或命名空间。...由空格分隔多个事件值，也可以是数组。必须是有效的事件。 childSelector：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。 ...addEventListener() 是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法...例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出对话框： 1 var obj = document.getElementById("demo"); 2 addEvent(obj ,"click

5.6K2 0

Python 中的 AppJar 模块

使用 AppJar 模块创建示例程序以下是我们将采取的步骤，以开发带有两个按钮的示例 AppJar 程序;按任意按钮将显示一个带有按钮标签的信息框 - 首先，我们从 appJar 模块导入 gui 类...接下来，我们定义函数 on_button_click（），每当单击按钮时都会调用该函数。使用应用程序对象的 infoBox（）方法，此函数显示一个信息框。...同样，我们向 GUI 添加另一个按钮，该按钮具有不同的标签但相同的事件处理程序。最后，我们使用 app 对象的 go（）方法启动 GUI 主循环，它允许程序处理用户交互和事件。...，它将创建一个带有两个按钮的 GUI 窗口。...单击任何按钮将显示一个带有按钮标签的信息框。结论最后，Python AppJar模块为GUI创建提供了一种简单且以用户为中心的技术。

1553 0

我至今没想到，我也能在 CSS 中实现 SVG 动画了

注意，我们对 SVG 元素应用了 CSS 类，应用了一些基本样式。在这个样式中，我们设置了元素的大小，并更改光标类型以表明它是可单击的。...为了使结果更易于访问，让我们将SVG包装在元素中，并处理该级别上的单击。...然后，我们添加一个单击事件侦听器。当触发 click 事件时，我们只在本身上切换 .is-active 类，而不是在层次结构中更深入地切换。...由于我们的图标由三个互不相连的形状组成，我们有三条路径来描述它们。同时在三条路径上应用脉动和舞蹈转换，而不是用 CSS 分别为 SVG 路径添加动画。...mute__headphones类，当我们这样做时，我们根本不需要定义开始和结束关键帧!

6471 0

JS快速入门（二）

它允许运行在浏览器中的代码访问文档节点并与之交互，了解并掌握 DOM 操作是 Web 开发中的必经之路 DOM结构及节点整个 HTML 的结构都可以由类似上图的树结构表示，整个树结构由节点组成...HTML 内容（文本和标签），类型为字符串 innerText 和innerHTML类似，但是只返回文本 children 返回指定元素的子元素节点集合 parentNode 返回指定节点的父节点 firstElementChild...IE9 浏览器鼠标及键盘事件常用鼠标事件方法说明 click 单击鼠标左键触发。...this.style.color = 'red' }) btn.addEventListener('click', function() { // 鼠标单击文字为蓝色 this.style.color...，等待元素加载完成后再获取其内容；使用 onload 绑定事件时，注意一个页面不要存在多个 onload，这样会只会运行最后一个 onload 中的代码，推荐使用addEventListener 绑定事件

6.5K3 0

今天聊聊DOM事件的传播机制

如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上，甚至也单击了整个页面。但有意思的是，IE 和 Netscape 开发团队居然提出了差不多是完全相反的事件流的概念。...，由于事件冒泡的存在，当我们点击 div 时，所有祖先元素的点击事件也会被触发。...事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click 事件会一直冒泡到 document 层次。...事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click 事件会一直冒泡到 document 层次。...事件冒泡（event bubbling），是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

9672 0

C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

（2）使如下代码运行后输出字符串sky，请补全横线处代码。...) { this.innerText = '我被点击了' }) 答案：addEventListener 此处需要为按钮绑定点击事件，根据代码形式可知，此处应使用事件监听方法...（5）代码如下，点击一次按钮，p元素中显示的数字是________。...六、鼠标及键盘事件 1. 常用鼠标事件名称描述 click 单击鼠标左键触发。...() { alert('已点击'); } 答案：click addEventListener方法第一个参数为事件名称，此处应为对应的点击事件名称。

2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭