Javascript 表上的eventListener不工作

我在做一个计算器，我在第一个跨栏时绊倒了。我试图在数字按钮上设置事件侦听器，以便函数在单击时运行，但我得到的错误是，我无法在null上设置事件处理程序。但我看不出我错在哪里

我正在尝试组织我的代码，就像我所做的一个在线课程一样，将所有的函数分离出来，并尽量使其易于阅读

请提前参阅代码和感谢：

//总控制器
var totalController=（函数（）{
})();
//用户界面控制器
var UIController=（函数（）{
var DOMstrings={
calcbuttons:“.calcbuttons”，
编号：'.number'，
运算符：'.operator'，
等于：‘。等于’，
总计：“#总计”
};
返回{
getDOMstrings:函数（）{
返回字符串；
}
};
})();
//全局控制器
变量控制器=（函数（totalCTRL、UICtrl）{
var setupEventListeners=函数（）{
var DOM=UICtrl.getDOMstrings（）；
var el=document.querySelector（“.calcButtons”）；
el.addEventListener（'click'，函数（e）{
//var表=e.target；
//if（table.classList）
控制台日志（e）；
//ctrlAddNumber（）；
});
//单击运算符
//点击C
//点击交流
//单击等于
};
var ctrlAddNumber=函数（）{
变量选择数；
//1.通过单击从html获取编号
selectedNumber=document.querySelector（DOM.number）.innerHTML；
控制台日志（编号）；
//2.添加到显示
};
返回{
init：函数（）{
log（'应用程序已启动'）；
setupEventListeners（）；
}
};
})（totalController，UIController）；
controller.init（）

@导入url（'https://fonts.googleapis.com/css?family=Lato');
JavaScript计算器
自动控制
&larr；
7.
8.
9
÷
4.
5.
6.
×
1.
2.
3.
-
0
.
=
+
有几件事：


将JS移出头部，靠近身体下方。脚本标记被阻止，浏览器在处理脚本元素之前不会继续呈现站点
如果希望某个元素是交互式的，请尝试使用一个用于该元素的元素。对于大多数其他交互，使用锚（
a
）元素在文档和按钮（
button
）之间导航
HTML表格需要
tbody
你的JS代码太多了，我没有时间全部看一遍，所以我举了一个小例子来说明它是如何工作的。我希望你能把它翻译成你的情况


const
calcButtons=document.querySelector（'.calcButtons'）；
函数onCalcButtonClicked（事件）{
调试器；
常数
clickedButton=event.target；
if（clickedButton.hasAttribute（'data-number'））{
console.log（'用户输入一个数字：'，clickedButton.getAttribute（'数据编号'）；
}else if（单击按钮.hasAttribute（'data-action'））{
console.log（'用户选择了一个操作：'，clickedButton.getAttribute（'data-action'））；
}
}
calcButtons.addEventListener（'click'，OnCalcButton单击）

自动控制
&larr；
7.
8.
9
÷
4.
5.
6.
×
1.
2.
3.
-
0
.
=
+
一般来说，让按钮成为元素是一个好主意，尤其是出于可访问性的原因。还要确保JS脚本在HTML之后运行，否则它将找不到任何可添加的内容。谢谢你们两位的关注。在底部添加JS文件解决了这个问题。。！谢谢你抽出时间来看我。这很有帮助。