Javascript not working when using Local

Support
1

I do not know if this is applicable to this forum so please let me know if I’m out of scope!

I created a header with two modals using html, css, and javascript. Linking these within the html document. Everything works… until I put it into the development environment.

As it is more proper to do so, I created a functions.php file and used wp_enqueue_script to add my javascript. It is not working. It doesn’t even load onto the page. Any ideas? Here is my code:

functions.php

  <?php

function k9stormdomestictheme_script_enqueue() {
  wp_enqueue_style( 'k9stormdomesticstyle', get_stylesheet_uri() );
  wp_enqueue_script( 'k9stormdomesticscript', get_template_directory_uri() . '/js/script.js', array (), 1.1, true);

}

add_action('wp_enqueue_scripts', 'k9stormdomestictheme_script_enqueue');

?>

index.php

<?php
    get_header();
    get_footer();
?>

script.js

var modalBtns = [...document.querySelectorAll(".button")];
modalBtns.forEach(function(btn){
  btn.onclick = function() {
    var modal = btn.getAttribute('data-modal');
    document.getElementById(modal).style.display = "block";
  }
});

var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function(btn){
  btn.onclick = function() {
    var modal = btn.closest('.modal');
    modal.style.display = "none";
  }
});

window.onclick = function(event) {
  if (event.target.className === "modal") {
    event.target.style.display = "none";
  }
}

I really appreciate any help. Thank you very much!