点击事件触发数组随机选元素功能失效,仅页面加载时执行
问题根因
addEventListener方法的第二个参数要求传入函数引用,事件触发时浏览器会自动执行该引用指向的函数。你当前代码里写的questionSelector()携带了括号,相当于代码解析到监听器绑定逻辑时就立即执行了questionSelector,仅把函数返回值传给监听器,后续事件触发时没有可执行的逻辑,因此只有页面加载时执行一次,点击按钮不会触发新的随机逻辑。
修复方案
调整监听器的传参逻辑,仅传入函数名(不带括号)即可,同时注意如果需要实际生成问题,要在questionSelector里执行拿到的问题生成函数:
let questionArray = [questionTypeZero, questionTypeOne]; function questionSelector(){ const selectedQuestionFunc = questionArray[Math.floor(Math.random() * 2)] // 执行选中的问题生成函数,完成问题生成逻辑 selectedQuestionFunc() }; // 传入函数引用,而非执行结果 window.addEventListener('load', questionSelector); newQuestion.addEventListener('click', questionSelector);
如果你的questionSelector设计上仅需要返回问题生成函数、由外部其他逻辑调用,也可以用匿名函数包裹处理:
newQuestion.addEventListener('click', () => { const generateQuestion = questionSelector() // 此处补充调用生成函数的相关逻辑 generateQuestion() })
内容的提问来源于stack exchange,提问作者John Yates
相关产品推荐
相关产品推荐

