How do I get the JavaScript Popup to work correctly?

Question

I have the following JavaScript in my of my HTML document:

      <script>

      const button = document.getElementById("the_button");
      const popupBox = document.getElementById("popup_box");
      const closeButton = document.querySelector(".close_button");

      if (button && popupBox && closeButton) {
         button.addEventListener("click", () => {
         setTimeout(() => {
         popupBox.style.display = "block";
         }, 1000);
         });

       closeButton.addEventListener("click", () => {
       popupBox.style.display = "none";
       });
       } else {
       console.log("Error: Button, popup box, or close button not found.");
       }
       </script>

In the HTML I have the following code:

<div class="SubForm ">
   <input type="email" name="" required="" placeholder="Input your email...">
   <button type="submit" class="btn-theme" name="the_button" 
   id="the_button">Subscribe</button>
</div>

<div id="popup_box">
  <span class="close_button">&times;</span>
  <p>Popup content goes here</p>
</div>

When I click on the button I get the following in my console: Error: Button, popup box, or close button not found..

What do I need to do to get this JavaScript popup to work properly? Is there something wrong in my syntax? Please let me know.