首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当使用.getElementByID时,Onclick函数只起作用一次

是因为getElementByID方法返回的是一个单个元素,而不是元素的集合。因此,当我们使用getElementByID获取到一个元素后,绑定的Onclick函数只会在第一次点击时起作用。

解决这个问题的方法是使用其他方法来获取元素,例如使用.getElementsByClassName或.getElementsByTagName方法来获取元素的集合,然后使用循环遍历每个元素并绑定Onclick函数。这样,无论点击哪个元素,都会触发相应的Onclick函数。

示例代码如下:

代码语言:txt
复制
var elements = document.getElementsByClassName("example-class"); // 使用getElementsByClassName获取元素集合
for (var i = 0; i < elements.length; i++) {
  elements[i].onclick = function() {
    // 在这里编写点击事件的处理逻辑
  };
}

在上述代码中,我们使用getElementsByClassName方法获取到了class名为"example-class"的所有元素,并通过循环遍历为每个元素绑定了Onclick函数。这样,无论点击哪个元素,都会触发相应的点击事件处理逻辑。

推荐的腾讯云相关产品:无

请注意,以上答案仅供参考,具体的解决方法可能因实际情况而异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 节流函数和防抖函数的注意事项

    www.cnblogs.com/zhouyangla/p/9065554.html防抖函数 https://www.cnblogs.com/zhouyangla/p/9096832.html节流函数 防抖 触发高频事件后n秒内函数只会执行一次...('test'); test.onclick=debounce(sayHi); // 防抖 节流 高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率 思路: 每次触发事件都判断当前是否有等待执行的延时函数...定时器没有执行的时候标记永远是false,在开头被return掉 canRun = true; }, 2000); }; } function...sayHi() { console.log(‘hi’); } var test = document.getElementById('test'); test.onclick...=debounce(sayHi); // 节流 这样写当然没有什么问题,这也是这两个函数的标准写法,但是博主在第一次测试这两个函数用的是直接在DOM元素上绑定事件的方法,下面以防抖函数为例说明: html

    73930

    解释 JavaScript 中计时器的工作原理

    与普通的手表计时器一样,我们可以一次启动计时器,并在特定时间后执行 JavaScript 中的函数或代码。 站长源码网 简单来说,我们可以使用计时器在一段时间延迟后执行代码。...例如,您访问某个网站,它会在您访问 3 到 4 分钟后显示注册框,我们可以使用 JavaScript 实现。我们可以设置延迟计时器以显示注册弹出框。...使用 setTimeOut() 函数在特定时间后执行代码 setTimeOut() 函数允许我们在特定的延迟后执行代码。但是,它允许我们定义延迟。它仅在特定延迟后执行一次代码。...";          }             使用 setInterval() 函数在每个间隔后执行函数 setTimeOut() 函数只执行一次回调函数...用户可以观察到,他们按下启动计时器按钮,startInterval() 函数将执行并调用 setInterval() 函数。setInterval() 函数在每秒调用回调函数后。

    1.5K20

    手写ReactHook核心原理,再也不怕面试官问我ReactHook原理

    } ReactDOM.render( , document.getElementById('root') ); 如代码所示,我们自己创建了一个useState方法 当我们使用这个方法...,如果是第一次使用,则取initState的值,否则就取上一次的值(laststate)....('root') ); } render() 没错,就是尽管我们传个子组件的props是固定的值,父组件的数据更改时,子组件也被重新渲染了,我们是希望传给子组件的props改变,才重新渲染子组件...('root') ); } render() 因此,Child被memo包装后,就只会当props改变才会重新渲染了。...(当然也有返回值,就是那个执行componentWillUnmount功能的时候写的返回值,但是这里返回值跟前两个作用不一样,因为你不会写 let xxx = useEffect(()=>{

    4.4K30

    js api 之 fetch、querySelector、form、atob及btoa

    以前我們是沒有表單數的時候,如果做表單的提交大多定義一個提交按鈕,用jQuery+click數實現表單提交, 或者獲取參數後使用ajax提交,對於後者暫且不說,對於前者 ES標準提供了新的數...form數,當然這個只是 document的一個屬性而已,需要提醒的是這個使用的前提是需要給form標籤定義一個name属性,这个name属性 的值即为表单函数的函数名字(也可为属性),具体用法如下...) .then(response => response.json()) .then(data => document.getElementById...) .then(response => response.json()) .then(data => document.getElementById...这里需要注意对是: Post请求的请求头的内容类型必须是application/json,至于application/x-www-form-urlencoded我一直没测通过,请各位指点 请求体中的数据对象必须使用

    1.5K30

    React学习(四)-理清React的工作方式

    它是存在于javascript空间树形结构,每次自上而下渲染React组件,会对比这一次产生的virtual DOM和上一次渲染的virtual DOM,对比就会发现差别,然后修改真正的DOM树就只需要修改中的部分就可以了的...React的工作方式及优点 在没有组件化React,Vue,Angular之前,毫无疑问,JQ是最直观易懂的,但是项目逐渐变得复杂庞大,用JQ写出来的代码耦合度就没那么高了的,正是这样,也就诞生了一些...也就是说, 这样的写法是不起作用的 如果想要在组件标签上监听事件起作用,也可以做到,就是结合第三方模块styled-components样式组件进行使用,是可以做到的...,React的子元素内容发生改变,并不会引起整个浏览器的重绘和重排,只会更改变化的数据部分,并且在给JSX添加事件监听,使用on*EnentType的方式 并且这种事件的监听,它只作用于原生HTML...元素上,若放在自定义的组件上,是不起作用的,具体解决办法,可以引入第三方styled-components模块的,后续单独拿一篇幅来说也不为过的,涉及到的知识还是挺多的 作者:川川,一个靠前排的90

    1.8K30

    React基础(4)-理清React的工作方式

    redux做公共数据管理,把组件里面的state数据抽离到store当中,可以使用无状态组件的 因为它只负责页面的渲染,没有去做任何逻辑操作的时候,UI组件我们一般都可以用无状态组件来定义,UI组件只负责页面的渲染...它是存在于javascript空间树形结构,每次自上而下渲染React组件,会对比这一次产生的virtual DOM和上一次渲染的virtual DOM,对比就会发现差别,然后修改真正的DOM树就只需要修改中的部分就可以了的...也就是说, 这样的写法是不起作用的 如果想要做到这一点,在组件标签上监听事件起作用,也可以做到,就是结合第三方模块styled-components样式组件进行使用...,React的子元素内容发生改变,并不会引起整个浏览器的重绘和重排,只会更改变化的数据部分,并且在给JSX添加事件监听,使用on*EnentType的方式 并且这种事件的监听,它只作用于原生HTML...元素上,若放在自定义的组件上,是不起作用的,具体解决办法,可以引入第三方styled-components模块的,后续单独拿一篇幅来说也不为过的,涉及到的知识还是挺多的

    2.1K20

    简单说 JavaScript中的事件委托(上)

    从上面的图中我们看见,点击 蓝色 p 元素,先触发了 p 元素上绑定的事件,然后又触发了 红色 div 元素上绑定的事件,这就是事件冒泡了。 事件委托 的实现 先来段代码 <!...2、第一段绑定了两次事件,第二段绑定了一次事件 也就是说,原来在 li 上绑定的事件,现在委托在了父元素 ul 上,而在 ul 上只需要绑定一次就可以了。...我们再来看另一种情况,元素最开始不存在,需要绑定事件,最先能想到会出现这种情况的场景就是,元素是通过发请求,获取数据后,拼接到页面上的。而这种元素如果在发请求之前就绑定事件,是不会生效的。 <!...就绑定事件 var li3 = document.getElementById("li3"); li3.onclick = function (){ console.log(li3.innerHTML...> 改成这样后,绑定事件就可以起作用了,但是这样如果元素改变多次,就要元素渲染一次,就绑定一次事件,显然是有点麻烦了。

    58920

    阻止a标签的默认事件及延伸

    看如下实例: (1)把单击事件处理程序注册到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接,浏览器会加载一个新页面。...Event 对象的 cancelable为false,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。...//原生js,只会阻止默认行为,不会停止冒泡 var a = document.getElementById("testA"); a.onclick = function(){ return false...需要停止冒泡行为时,可以使用: function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation...IE的方式来取消事件冒泡 } } 需要阻止默认行为时,可以使用: function stopDefault( e ) { if ( e && e.preventDefault ){

    2.5K60

    React学习(七)-React中的事件处理

    bind方法的绑定,会在每次组件渲染都会创建一个新的函数,它会影响性能:最好是放在constructor函数中进行this坏境的绑定,因为constructor函数只会执行一次 constructor...从上面的效果示例当中,当鼠标滚轮不断滚动,事件处理函数的执行顺序不一样 给一个大范围的时间内,比如:1小内,每几分钟执行一次,超过一小不在执行,推荐使用第一种函数节流的方式 如果仅仅要求间隔一定时间执行一次...,推荐使用第二种函数节流的方式 函数防抖 定义:防止抖动,重复的触发,频繁操作,核心在于,延迟事件处理函数的执行,一定时间间隔内只执行最后一次操作,例如:表单多次提交,推荐使用防抖 换句话说,也就是连续触发事件并没有执行事件处理函数...如上输入框效果所示,每当输入框输入值后,键盘弹起,执行事件处理函数,而不应该是键入内容都触发一次事件处理函数 同理,搜索引擎,表单联想查询功能,不是根据用户键入的字母,数字,内容同时进行Ajax...未使用防抖,每次键盘keyup弹起一次,就会触发一次,用户未输入完成就提示输入有误,这种体验不是很好 换而言之,如果每次键盘弹起,都发送Ajax请求,这种思路本是没错的,但是若是间隔时间很短,连续输入

    7.4K40

    JavaScript停止冒泡和阻止浏览器默认行为

    上面的代码,Demo如下,我们单击test,会依次触发alert(“li”),alert(“ul”),alert(“div”),这就是事件冒泡。...Event 对象的 cancelable为false,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。...("testB"); a.onclick = function(){ return false; }; 下面这个是使用jQuery,既阻止默认行为又停止冒泡 <div id='div'  onclick...需要停止冒泡行为时,可以使用 function stopBubble(e) {  //如果提供了事件对象,则这是一个非IE浏览器  if ( e && e.stopPropagation )      ... = true;  } 需要阻止默认行为时,可以使用 //阻止浏览器的默认行为  function stopDefault( e ) {      //阻止默认浏览器动作(W3C)      if (

    2.2K20

    React基础(7)-React中的事件处理

    bind方法的绑定,会在每次组件渲染都会创建一个新的函数,它会影响性能:最好是放在constructor函数中进行this坏境的绑定,因为constructor函数只会执行一次 constructor...从上面的效果示例当中,当鼠标滚轮不断滚动,事件处理函数的执行顺序不一样 给一个大范围的时间内,比如:1小内,每几分钟执行一次,超过一小不在执行,推荐使用第一种函数节流的方式 如果仅仅要求间隔一定时间执行一次...,推荐使用第二种函数节流的方式 函数防抖 定义:防止抖动,重复的触发,频繁操作,核心在于,延迟事件处理函数的执行,一定时间间隔内只执行最后一次操作,例如:表单多次提交,推荐使用防抖 换句话说,也就是连续触发事件并没有执行事件处理函数...如上输入框效果所示,每当输入框输入值后,键盘弹起,执行事件处理函数,而不应该是键入内容都触发一次事件处理函数 同理,搜索引擎,表单联想查询功能,不是根据用户键入的字母,数字,内容同时进行Ajax...未使用防抖,每次键盘keyup弹起一次,就会触发一次,用户未输入完成就提示输入有误,这种体验不是很好  换而言之,如果每次键盘弹起,都发送Ajax请求,这种思路本是没错的,但是若是间隔时间很短,连续输入

    8.4K41
    领券