Rails: Cannot read property 'addEventListener' of null

Question

Having an issue gitting addEventListener to work. I think it is something going wrong with document.querySelector, but not sure why it's returning null.

Here's my index.html:

<% @title="Versatile Contracting Group | Home" %>
<section id="showcase">
  <div class="container">
    <h1>Versatile Contracting Group</h1>
    <p> Lorem minim anim quorum veniam veniam elit velit eram cillum export aute summis</p>
  </div>
</section>
<section id="boxes">
  <div class="container">
    <div class="box">
      <%= image_tag("logo_brush.png", :alt => "stones pic") %>
      <h2>Stone, Vaneer, Concrete and Paver</h2>
      <p>We transform patios, walkways, driveways, walls, columns, subdivision monument signs, and more!</p>
    </div>
    <div class="box">
      <%= image_tag("logo_css.png", :alt => "stones pic") %>
      <h2>Outdoor Firepits and Kitchens</h2>
      <p>Take your backyard to the next level with a kitchen or firepit</p>
    </div>
    <div class="box">
      <%= image_tag("logo_html.png", :alt => "stones pic") %>
      <h2>Grading and Drainage Services</h2>
      <p>We take care of all grading and drainage work, while making your space look incredible</p>
    </div>
  </div>
  <!-- Add picture slideshow -->
</section>
<div class="wrap">
  <div id="arrow-left" class="arrow"></div>
  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
      </div>
    </div>
    <div class="slide slide2">
      <div class="slide-content">
        <span></span>
      </div>
    </div>
    <div class="slide slide3">
      <div class="slide-content">
        <span></span>
      </div>
    </div>
  </div>
  <div id="arrow-right" class="arrow"></div>
</div>

And here is my welcome.js:

let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Init slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show prev
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

Answer 1

Probably you include your script before the page is loaded. Move the script to the bottom of body or use DOMContentLoaded

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });