Javascript 用于多个页面和按钮的addEventListener

我太习惯于在react和组件中工作了，所以在vanilla JS中这样做有时会让我的大脑一片空白

我有一个包含多个页面/URL的网站。某些页面具有用户可以交互的独特样式

我有一个文件

script.js

。我使用

document.getElementsByClassName

获取元素，然后使用

addEventListener

进行“单击”等操作。当我只在一个页面上工作时，我从未注意到当我开始构建第二个页面时，脚本会中断，因为它找不到元素（上一个页面上的元素）

这是有道理的，但是你如何解决这个问题呢？我的整个脚本用

window.onload

封装

比如说,

页面1.html

<button class="first"> Click me </button>

---

在这种情况下，此脚本将无法工作，因为在尝试查找元素和添加事件侦听器时会中断

正如@epascarello提到的，解决方案很简单

---

将事件侦听器包装在

if（element）

语句中

另一种解决方案是向按钮添加onclick事件，如下所示

<button onclick="myFunction()">Click me</button>.

点击我。

---

并在js fie中定义函数。

它不会起作用，因为您将引用一个不存在的元素。因此，在使用之前先检查元素是否存在。是否有什么东西阻止您直接在每个按钮的html中使用

onclick

属性？（即，

单击我

）您可以将事件侦听器包装在条件中

if（buttonOne）…

是的。在@epascarello评论之后，我意识到了这一点。就是这样。我不敢相信我忽略了这一点。谢谢

var buttonOne = document.getElementsByClassName("first")[0];
var buttonTwo = document.getElementsByClassName("second")[0];

buttonOne.addEventListener('click',function(){
        firstFun(); 
})

buttonTwo.addEventListener('click',function(){
        secondFun(); 
})

function firstFun () { .. }
function secondFun () { .. }

<button onclick="myFunction()">Click me</button>.