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,一经查实,立即删除!

相关文章

git 小记

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

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;十位、千位、十万位 &…

如何保障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指…

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

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

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;这也…

React-Redux(一)

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容:React-Redux&#xff08;一&#xff09; 目录 1、简介 2、三大原则&#xff08;重点&#xf…

ECharts数据大屏展示效果

ECharts数据大屏展示效果 前言1、效果预览1.2、视频效果 2、使用框架3、如何处理屏幕自适应效果4、ECharts模块、dataV大屏插件 编写与布局5、往期回顾总结&#xff1a; 前言 数据大屏需整体效果好看&#xff0c;界面缩放自适应大小&#xff0c;全屏展示铺满整个屏幕并自适应&a…

HTML段落标签、换行标签、文本格式化标签与水平线标签

目录 HTML段落标签 HTML换行标签 HTML格式化标签 加粗标签 倾斜标签 删除线标签 下划线标签 HTML水平线标签 HTML段落标签 在网页中&#xff0c;要把文字有条理地显示出来&#xff0c;就需要将这些文字分段显示。在 HTML 标签中&#xff0c;<p>标签用于定义段落…

Golang面试题四(GMP)

目录 1.Goroutine 定义 2.GMP 指的是什么 3.GMP模型的简介 全局队列&#xff08;Global Queue&#xff09; P的本地队列 P列表 M列表 4.有关P和M的个数问题 P的数量问题 M的数量问题 P和M何时会被创建 5.调度器P的设计策略 复⽤线程 work stealing机制 hand off…

算法 第41天 动态规划3

343 整数拆分 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 # 动态规划 def integerBreak(n:int)->int:dp[0]*(n1)dp[2]1 #从下标为2开始 &#xff0…

本地生活服务平台都有哪些,靠谱吗?

随着本地生活服务的发展潜力和盈利方式被不断挖掘&#xff0c;越来越多的人开始发现其中所蕴含着的巨大商机&#xff0c;大家所熟悉的抖音、小红书和支付宝等平台也纷纷上线了本地生活板块&#xff0c;再次印证了其前景的广阔。在此背景下&#xff0c;普通人想要趁势入局分一杯…

定制k8s域名解析------CoreDns配置实验

定制k8s域名解析------CoreDns配置实验 1. 需求 k8s集群内通过CoreDns互相解析service名. 同时pana.cn域为外部dns解析,需要通过指定dns服务器进行解析 再有3个服务器,需要使用A记录进行解析 2. K8s外DNS服务器 查看解析文件 tail -3 /var/named/pana.cn.zone 解析内容 ww…

免费申请泛域名证书

通配符证书是一种比较特殊的SSL/TLS 证书&#xff0c;可用于保护多个域名&#xff08;含主域名&#xff09;&#xff0c;由域名字段中的通配符 (*) 指示。这种证书主要用于具有很多子域的组织。通配符证书对主域及其所有次级子域有效。 对于免费通配符证书而言&#xff0c;目前…

IAR 使用笔记(IAR BIN大小为0异常解决)

烧写 由于芯片的内部SPI FLASH的0级BOOT 程序起到到开启JTAG SW 仿真功能&#xff0c;一旦内部SPI FLASH存储的BL0启动代码被损坏&#xff0c;芯片的JTAG 将不能被连接。所以对BL0的烧写需要谨慎&#xff0c;烧写BL0过程保证芯片不断电。 如果烧写了多备份的启动代码&#xff…

NLP基础—jieba分词

jieba分词 支持四种分词模式 精确模式 试图将句子最精确地切开,适合文本分析;全模式 把句子中所有的可以成词的词语都扫描出来, 速度非常快,但是不能解决歧义;搜索引擎模式 在精确模式的基础上,对长词再次切分,提高召回率,适合用于搜索引擎分词。paddle模式 利用Paddle…