注册    登录
关注
Py学习  »  Jquery

如何使用一个代码块以网站上的所有类为目标?(没有jQuery)

ab3d_work • 4 年前 • 70 次点击  

作为课堂作业的一部分,我一直在做游戏,遇到了一个问题。问题是代码只影响一个按钮。我正在使用下面的两个“重新启动”按钮重新加载浏览器… 

//Reload Page
document.querySelector('.restart').addEventListener('click', function () {
    location.reload();
});

顶部有一个重新启动按钮(如标题)。另一个是模态的。模式首先显示在HTML中。我99.9%,这就是为什么第二个被跳过的原因。我试过用 document.querySelectorAll.... 然而,我得到了 Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function 两者都不起作用。我如何使用一个代码片段来用JavaScript控制所有相同的类?下面是游戏的密码笔…

https://codepen.io/AB3D/pen/xJWMpd

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/37911
Reply
 
70 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Eyad Mohammed Osama
Reply   •   1 楼
Eyad Mohammed Osama    5 年前

这是因为 querySelectorAll() 返回元素数组。
解决方案是迭代这些元素,并将事件附加到每个元素上。 

<button class="restart">Button 1</button>
<button class="restart">Button 2</button>
<button class="restart">Button 3</button>
<script>
  var elements = document.querySelectorAll(".restart");
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("click", function() {
      location.reload();
    });
  }
</script>

因为您使用类名作为选择器,所以也可以使用 getElementsByClassName("restart") 作为替代方法,此方法还返回元素数组。

登录后回复
关于   移动版   ·   三行代码   ·   今天看啥   ·   Code   ·   link之家   ·   卧龙搜索   ·   藏经阁   ·   小百科
Py学习 - 专注于Python技术发展的社区(原Django社区)
沪ICP备11025650号