为何无法通过事件监听器执行JavaScript函数？求助排查

核心问题1：选择器不匹配 #

你JS里用的是类选择器 .btn0，但你的HTML按钮元素并没有设置 class="btn0"，只有id="btn0"和name="btn0"。这直接导致querySelector找不到对应元素，返回null。

修复方案二选一： #

• 修改JS选择器为ID选择器：

  const btn0 = document.querySelector('#btn0');
  

  或者用更高效的getElementById：

  const btn0 = document.getElementById('btn0');
  

• 给HTML按钮添加class属性：

  <input type="button" value="0" name="btn0" id="btn0" class="btn0" />
  

核心问题2：JS执行时机过早 #

如果你的JS代码在DOM元素渲染前就执行了（比如放在<head>标签里），即使选择器正确，也会因为元素还没被创建而返回null。

修复方案三选一： #

1. 把JS代码移到HTML的</body>闭合标签之前，确保DOM元素都已加载完成
2. 用DOMContentLoaded事件包裹代码，等待DOM加载完毕后再执行：

   document.addEventListener('DOMContentLoaded', function() {
       const btn0 = document.querySelector('#btn0');
       btn0.addEventListener('click', function() {
           showNum(0);
       });
   });
   

3. 若使用外部JS文件，给<script>标签添加defer属性，让脚本在DOM加载完成后执行：

   <script src="your-script.js" defer></script>
   

补充：关于getElementsByName的使用 #

你提到试过getElementsByName，这个方法返回的是NodeList集合（不是单个元素），所以需要取集合中的第一个元素才能绑定事件：

const btn0 = document.getElementsByName('btn0')[0];

内容的提问来源于stack exchange，提问作者Justin Zitel