为何JavaScript变量openBtn获取HTML元素却返回null？

核心问题 #

你的JavaScript代码在浏览器还没解析渲染出id为open的按钮元素时就已经执行了，所以document.getElementById('open')会返回null。

可行的解决办法 #

1. 把JS代码移到HTML末尾 #

将你的JS代码放在</body>标签的前面，这样浏览器会先加载完所有DOM元素再执行JS：

<!-- 页面所有HTML内容 -->
<button id="open">
  <h2>EMT Presents: <%= event.title%></h2>
  <img class="flyer"src="<%= src%>" alt= "flyer">
  <p>Coming to you with a DJ Line up and Vibes like Never before<br>
     <br>
     <br>
     Sounds on the night brought to you by: DJ Suukz, DJ Kwarmz Original, DJ Larni and  DJ Dynamic  so make sure to bring your dancing shoes because these tunes will do more than make y>
     <br>
     Genre's on the night: R&B, Afrobeat, Hip Hop, UK Drill, Bashment and much, much more!!<br>
     <br>
     THIS EVENT WILL SELL OUT!! So be sure to purchase your tickets ASAP!!</p>
</button>
<div class= "modal-container" id="modal_container">
   <div class="modal">
    <h2>EMT Presents: <%= event.title%></h2>
    <img class="flyer"src="<%= src%>" alt= "flyer">
    <button id="closer">
     X
    </button>
   </div>
</div>

<!-- JS代码放在这里 -->
<script>
const openBtn = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const closer = document.getElementById('closer');

openBtn.addEventListener('click', () => {
modal_container.classList.add('show');
});
closer.addEventListener('click', () => {
modal_container.classList.remove('show');
});
</script>
</body>

2. 用DOMContentLoaded事件包裹JS代码 #

如果必须把JS代码放在页面头部，就用DOMContentLoaded事件确保DOM加载完成后再执行代码：

document.addEventListener('DOMContentLoaded', () => {
  const openBtn = document.getElementById('open');
  const modal_container = document.getElementById('modal_container');
  const closer = document.getElementById('closer');

  openBtn.addEventListener('click', () => {
    modal_container.classList.add('show');
  });
  closer.addEventListener('click', () => {
    modal_container.classList.remove('show');
  });
});

3. 修正HTML结构（额外提示） #

你的<button>标签里嵌套了<h2>、<p>等块级元素，这不符合HTML规范。虽然现代浏览器能兼容，但可能引发潜在的DOM解析问题，建议调整结构：比如把按钮换成<div>，或者简化按钮内容，用外部元素触发弹窗逻辑。

内容的提问来源于stack exchange，提问作者Tope Oshin