javascript 统计按钮点击量

要实现计算按钮被点击的次数,我们可以借助JavaScript中的事件监听器。事件监听器可以帮助我们捕获用户在网页上的各种操作,如点击按钮、输入文本等。通过监听按钮的点击事件,我们可以在每次点击时进行相应的操作,例如增加点击计数。

多个按钮的情况
如果页面上存在多个按钮,我们可以为每个按钮创建一个计数器,并在相应的事件监听器中进行操作,以区分不同按钮的点击次数。 

<!DOCTYPE html>
<html>
<head><title>计算按钮点击次数</title>
</head>
<body><h1>按钮点击次数统计器</h1><button class="countBtn">按钮1</button><p class="countText">按钮1点击次数:0</p><button class="countBtn">按钮2</button><p class="countText">按钮2点击次数:0</p><script>// 获取所有按钮和计数器元素var countBtns = document.getElementsByClassName("countBtn");var countTexts = document.getElementsByClassName("countText");// 初始化计数数组var counts = Array(countBtns.length).fill(0);// 设置按钮点击事件监听器for (var i = 0; i < countBtns.length; i++) {countBtns[i].addEventListener("click", function(index) {return function() {// 每次点击相应计数器加1counts[index]++;// 更新相应计数器文本countTexts[index].textContent = "按钮" + (index + 1) + "点击次数:" + counts[index];};}(i));}</script>
</body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822678.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 配置文件config.ini用法详解

1、介绍config.ini文件 config.ini是一种配置文件&#xff0c;常用于存储程序或系统的配置信息。它通常采用键值对的形式&#xff0c;每一行表示一个配置项&#xff0c;用等号&#xff08;&#xff09;将键和值分隔开。config.ini文件可以包含多个节&#xff08;section&#x…

git 小记

一、 github新建仓库 git clone 。。。。。。。。。。。 &#xff08;增删查补&#xff0c;修改&#xff09; git add . git commit -m "修改” git push (git push main) 二、branch 分支 branch并不难理解&#xff0c;你只要想像将代码拷贝到不同目录…

如何在Python中使用环境变量? —— Python环境变量的应用:安全和灵活的配置方法

在Python中&#xff0c;可以使用os模块来访问和操作环境变量。 要访问一个环境变量的值&#xff0c;可以使用os.environ字典。例如&#xff0c;要获取PATH环境变量的值&#xff0c;可以使用os.environ[PATH]。 要设置一个环境变量的值&#xff0c;可以使用os.environ字典的索…

vue一键复制实现(实测)

vue一键复制实现&#xff08;实测&#xff09; 描述&#xff1a;能够通过点击事件完成复制链接的功能 1. 安装clipboard npm install clipboard --save 2. 在vue组件中使用 <template><button class"btn" :data-clipboard-text"link">复制&…

MongoDB的CURD(增删改查操作)

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 ✈️如果喜欢这篇文章的话 &#x1f64f;大大们可以动动发财的小手&#x1f449;&#…

刷代码随想录有感(34):前k个高频元素

本题代码涉及到了多个陌生概念&#xff0c;题干如下&#xff1a; 代码; class Solution { public:class mycomparison{//自定义规则&#xff0c;使优先队列可以自动排序public:bool operator()(pair<int, int> & lhs, pair<int, int> & rhs){return lhs.s…

第十五届蓝桥杯大赛软件赛省赛 C/C++ 大学 B 组(基础题)

试题 C: 好数 时间限制 : 1.0s 内存限制: 256.0MB 本题总分&#xff1a;10 分 【问题描述】 一个整数如果按从低位到高位的顺序&#xff0c;奇数位&#xff08;个位、百位、万位 &#xff09;上 的数字是奇数&#xff0c;偶数位&#xff08;十位、千位、十万位 &…

SQLSERVER对等发布问题处理

问题1&#xff1a; 无法对 数据库Sast_Business 执行 删除&#xff0c;因为它正用于复制。 (.Net SqlClient Data Provider) 处理&#xff1a; USE [master]; GO EXEC sp_replicationdboption dbname NSast_Business, optname Npublish, value Nfalse; EXEC sp_replica…

如何保障UDP传输中数据文件不丢失?

UDP协议因其低时延和高速传输的特性&#xff0c;在实时应用和大量数据传输领域中发挥着不可或缺的作用。但是&#xff0c;由于UDP是一种无连接的通讯协议&#xff0c;它并不确保数据包的顺序、完整性和可靠性。 为了解决UDP传输中数据一致性的问题&#xff0c;技术专家们进行了…

【Linux系统编程】第四弹---基本指令(二)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、echo指令 2、cat指令 3、more指令 4、less指令 4、head指令 5、tail指令 6、时间相关的指令 7、cal指令 8、find指…

前端错误监控的方法有哪些

前端错误监控是指通过各种手段收集、分析和处理前端应用运行中发生的错误 常用的前端错误监控的方法有 使用 try catch 方法 捕获特定代码块中的错误多用于处理特定函数或代码段可能抛出的异常&#xff0c;尤其是异步代码网络请求错误监控 promise.catchtry catch全局错误处理…

Wix在国内受限?为何不使用中国版WIX自助建站,wix的国产替代工具

wix是一款知名的在线网站建站工具&#xff0c;能让用户在其网络上网站编辑器中拖放工具创建HTML5网站。用户可在他们的网站编辑器中加入额外的功能&#xff0c;例如社交网络按钮、电子商务功能、联系表格、电子报及社群论坛等。 但wix在国内不能用&#xff0c;或打开速度很慢&a…

事务相关:TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();

1&#xff09;当我们需要对一个事件增加事务时&#xff0c;可以使用Transactional(rollbackFor Exception.class)&#xff0c;但此时由于抛出了异常&#xff0c;return方法无法继续执行。 2&#xff09;此时&#xff0c;我们就需要手动触发事务&#xff0c;看代码如下&#x…

蓝桥杯C/C++A组省赛历年真题题解(2020~2024)

刷题整理2020~2024蓝桥A组真题。 20202021202220232024门牌制作卡片&#xff08;模拟题&#xff09;裁纸刀幸运数(数字&#xff09;艺术与蓝球(模拟)既约分数直线&#xff08;数学枚举&#xff09;灭鼠先锋有奖问答(dfs)五子棋对弈(dfs)蛇形填数货物摆放(因子暴力枚举&#xf…

关于无界在vue中的应用

无界的链接地址&#xff1a;https://wujie-micro.github.io/doc/ 当我们配置好我们的页面是子应用的时候 1.处理好路由 1.对于我们定义的微前端服务&#xff0c;我们处理方式 if (v.frame true && !v.children.length && !v.unNeedMicroView) {v.component…

vue3页面跳转白屏

场景描述 在vue3项目中&#xff0c;使用layout封装布局&#xff0c;页面跳转时左侧菜单栏展示正常&#xff0c;右侧出现白屏&#xff0c;刷新页面后正常显示。 解决方案 方案一&#xff1a;查看是在template标签下面是否有直接的注释&#xff0c;如果有需要把注释写到div里面。…

安卓手机APP开发__媒体开发部分__音轨的选择

安卓手机APP开发__媒体开发部分__音轨的选择 目录 概述 查询可用的音轨 修改轨道选择参数 基于约束的轨道选择 选择特定的轨道 禁用轨道的类型和组 定制化轨道选择器

npm命令卡在reify:eslint: timing reifyNode:node_modules/webpack Completed in 475ms不动

1.现象 执行npm install命令时&#xff0c;没有报错&#xff0c;卡在reify:eslint: timing reifyNode:node_modules/webpack Completed in 475ms不动 2.解决办法 &#xff08;1&#xff09;更换淘宝镜像源 原淘宝 npm 域名http://npm.taobao.org 和 http://registry.npm.ta…

git clone自动安装最新版本,如何选择安装自己想要的其他版本,最简单解决方法

比如本人最新在安装 git clone https://github.com/synthetik-technologies/blastfoam.git 本人想要其中的3.0版本&#xff0c;但是上面git clone默认是使用最新版本6.2.0 这时候可以先执行 git clone https://github.com/synthetik-technologies/blastfoam.git 然后由…

【C++】力扣OJ题:构建杨辉三角

Hello everybody!今天给大家介绍一道我认为比较经典的编程练习题&#xff0c;之所以介绍它是因为这道题涉及到二维数组的构建&#xff0c;如果用C语言动态构建二维数组是比较麻烦的&#xff0c;而用C中STL的vector<vector<int>>,就可以立马构建出来&#xff0c;这也…