我也已经习惯于在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 () { .. }
该脚本无法正常工作,因为尝试查找元素并添加事件侦听器会中断。
答案 0 :(得分:1)
另一种解决方案可以是向按钮添加onclick事件,如下所示
<button onclick="myFunction()">Click me</button>.
并在js fie中定义函数。
答案 1 :(得分:0)
正如@epascarello提到的那样,解决方案很简单。
在if (element)
语句中包装事件侦听器。