用getElementsByClassName获取元素后，绑定的事件为什么不起作用。

最新推荐文章于 2023-07-14 12:00:38 发布
最新推荐文章于 2023-07-14 12:00:38 发布
阅读量1.5k 收藏 4
点赞数 2
文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dong_dong222/article/details/121637947
版权

很多初学js小伙伴可能遇到一个这样的问题，我明明给元素设置了类名，也用getElementsByClassName获取到了正确的类名，但是绑定的事件并没有起作用。

如下

这是一个简单的开关等案例，在保证所有单词正确的情况下，并不能达到我想要实现的效果，

原因是因为：用getElementsByClassName获取元素，返回的是一个伪数组，要加索引才能被使用。

  科普一下：伪数组是类似数组却没有数组方法的集合。

以上图为例子，应该是 btn[0]. οnclick=function{   };这样才能起到作用

 

叮当猫❀
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 获取class的元素的方法 以及创建方法getElementsByClassName
10-27
js 获取class的元素的方法 以及创建方法getElementsByClassName，需要的朋友可以参考一下
vue页面中使用getElementsByClassName无法获取元素问题
左直拳的马桶_日用桶
01-05 5591
在vue页面中，使用getElementsByClassName获取dom，发觉总是获取不到，返回的数组，空空如也，长度为0。需要使用nextTick
关于IE中getElementsByClassName不能用的问题解决方法
09-05
今天使用getElementsByClassName写了段小程序，在IE6、8中测试的时候就出现问题了，浏览器报错，经搜索找到了一个比较好的方法，是个老外写的一个方法
IE浏览器不支持getElementsByClassName的解决方法
09-04
主要介绍了IE浏览器不支持getElementsByClassName的解决方法,本文的方法比较完美的解决了这个问题,需要的朋友可以参考下
10.23-11.06
likeuzi的博客
11-07 226
1、在portal中点击城市按钮:加上去包含有城市的路径 2、然后在index.vue中根据$route.params.city来设置vuex中的store.state.city,然后其他人去取city就去到的是首页选择的,这里注意一下，    在main.js里面引入了store,并且在main.js中最底层vue对象中注入了store，    这样 store 的实例就可以注入所有的子组
第一次使用vue3和工作中遇到的一些小问题总结
weiwudexinyang的博客
03-21 1215
实用的小方法 关于删除数组指定元素 this.chooseIdList.splice(this.chooseIdList.findIndex(item => item === id),1); [].slice.call 查找数组中最大项 Math.max.apply( Math, widthList.map((item: any) => { return item.uploadData?.frame?.width; }) ); Computed 虽然是一个 function，但是它可以通过 ge
JS：getElementsByClassName()无效的原因以及解决方法
tiandaochouqin_1的博客
04-09 1万+
<button class="btn btn-xs btn-warning revise">编辑</button> var revise = document.getElementsByClassName("btn btn-xs btn-warning revise")[0]; revise.onclick=function revise() { revBack...
vue+elementUi自定义dialog对话框、多个组件实例动态设置宽高、getElementsByClassName
“代码农”微信公众号
04-30 1380
目录1、HTML2、JavaScript3、css 1、HTML <el-dialog custom-class="schedule_task_diaog" :show-close="false" :center="true" :visible.sync="dialogTableVisible" :close-on-click-modal="false" > <div>内容... ...</div> </el-dialog> 2、
获取类名getElementsByClassName添加事件,要加索引才生效
lee_srr的博客
09-07 949
<script> let btn2 = document.getElementsByClassName("btn1"); btn2[0].onclick = function () { alert("别点我"); } </script> btn2[0]
vue3中获取ref元素的几种方式
热门推荐
斗师——Ace
04-27 1万+
1. 原生js获取dom元素： document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) .... 2. ref获取单个dom元素： <template> <div ref='divDom'></div> </template> <script setup> import { ref} f
javaScript与vue获取元素的方法
wanjun_007的博客
02-18 3675
vue获取元素及兄弟元素，父级元素，子元素。javaScript获取元素
getElementsByClassName()获取元素后onclick事件无效解决办法
段占彪的博客
05-15 8504
问题描述 今天使用源生js实现 点击按钮关闭对应div功能（有多个按钮，相同class名），出现onclick无效情况。 问题原因 使用getElementById获取元素的结果是：当前元素 使用getElementsByClassName获取元素的结果是：相同class名元素数组。 解决办法 var div = document.getElementById("div"); console.log("getElementById: "); console.log(div);
vue3学习笔记(总)——ts+组合式API(setup语法糖)
小多的博客
01-18 6682
接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 。 也可以获取属性 的浅层作用形式。 1.4 triggerRef() 强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。强制更新注意： ref()和shallowRef()不能一块写，不然会影响shallowRef 造成视图更新 由于 ref底层调用了triggerRef()，所以会造成视图的强制更新 1.5 customRef() 创建一个自定义的 ref，显式声明对
vue3的setup中如何用getElementById获取dom元素
the7thuni的博客
06-12 2693
在循环使用canvas时，给每个canvas设置了一个id，我想通过id来操作canvas，但是在setup中不能用原生的js获取dom元素， 于是就有了这篇文章。
js 关于获取标签绑定点击事件问题
weixin_44642057的博客
10-19 5932
在原生js里，要绑定点击事件，首先要获取它的标签，获取标签的方法有很多，但不是每一种都可以绑定点击事件 1.先来写一个div标签 <body> <div class="classA" id="idA">事件执行步骤</div> </body> 2.这里获取这个div标签的方法有： 通过id获取：document.querySelector('IdA') 通过class获取：document.getElementsByTagName('calssA'
vue3获取dom元素
最新发布
brilliantSt的博客
07-14 7660
在vue3中获取 dom元素
Vue中的document.getElementsByClassName或者HTMLContention中的内容无法读取
Fabbom的博客
05-25 6020
转载文章：Vue 无法读取HTMLCollection列表的length解决.
Vue3 学习总结笔记 (十四)
IT_Holmes的博客
08-20 1675
1. Vue3 之 生命周期 2. Vue3 之 自定义hook函数 3. Vue3 之 toRef 和 toRefs的使用 4. Vue3 之 shallowReactive 和 shallowRef 函数API 5. Vue3 之 readonly函数 和 shallowReadonly函数 6. Vue3 之 toRaw 和 markRaw函数 使用 7. Vue3 之 customRef 函数 使用 8. Vue3 之 provide 和 inject函数使用 8. Vue3 之 响应式数据的判断
vue3组件添加name属性
weixin_43625760的博客
05-14 780
vue3配置name属性
<!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>let</title> <script> let items = document.getElementsByClassName(".item"); //遍历并绑定事件 for (let i = 0; i < items.lenght; i++) { items[i].onclick = function () { //点击切换背景颜色 this.sytle.background = "pink"; }; } </script> <style> .container { margin: auto; } .item { display: inline-block; width: 200px; height: 100px; border: 1px solid #ccc; } </style> </head> <body> <div class="container"> <h3>点击切换背景颜色</h3> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> </body> </html>
06-09
这段代码中存在一个拼写错误，导致代码无法正常工作。在 JavaScript 部分，`length` 被错误拼写成了 `lenght`，导致 `items` 变量没有正确地获取到所有元素，因此无法成功绑定事件。 正确的代码如下所示： ```html <!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>let</title> <script> let items = document.getElementsByClassName("item"); // 修正拼写错误 //遍历并绑定事件 for (let i = 0; i < items.length; i++) { items[i].onclick = function () { //点击切换背景颜色 this.style.background = "pink"; // 修正拼写错误 }; } </script> <style> .container { margin: auto; } .item { display: inline-block; width: 200px; height: 100px; border: 1px solid #ccc; } </style> </head> <body> <div class="container"> <h3>点击切换背景颜色</h3> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> </body> </html> ``` 修正拼写错误后，代码就可以正常运行了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值