Question

我也已经习惯于在React和组件中工作，因此在香草JS中完成所有这些工作会使我的大脑有些空白。

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

我只有一个文件script.js。我得到document.getElementsByClassName的元素，然后为{clicks}使用addEventListener，而没有点击。当我只在一页上工作时，我从没注意到当我开始构建第二页时脚本会中断，因为它找不到元素（在上一页中）。

这确实有意义，但是您如何解决呢？我的整个脚本都以window.onload代替。

例如，

Page1.html

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

Page2.html

<button class="second"> Click me </div>

Scrip.js

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 () { .. }

该脚本无法正常工作，因为尝试查找元素并添加事件侦听器会中断。

Answer 1

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

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

并在js fie中定义函数。

Answer 2

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

在if (element)语句中包装事件侦听器。

用于多个页面和按钮的addEventListener

2 个答案: