why is my javascript function nul but it is definedl?

Question

I have a javascript function called openBtn which is supposed to get the button with ID = open which is defined in the html but for some reason it is null

    <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>

here is the java 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');
});