consoleでjavascriptのエラーが発生して、動かない状態になっています。

Question

私は、複数の画像のスライドショーを実装する中で、consoleでエラーが発生してしまい、動かない状態になっています。もしわかる方がいらしたら、教えていただきたいです。

document.addEventListener("turbolinks:load", function(){
  
  'use strict';
  
  var currentNum = 0;
  var prev = document.getElementById('prev');
  var next = document.getElementById('next');
  var target = document.getElementById('target');

  prev.addEventListener('click', function() {
    currentNum--;
    if (currentNum < 0) {
      currentNum = files.length - 1;
    }
    target.src = files[currentNum];
  });

  next.addEventListener('click', function() {
    currentNum++;
    if (currentNum > files.length - 1) {
      currentNum = 0;
    }
    target.src = files[currentNum];
  });

})

<div class ="contents row">
  <div class="main">
    <i class="fas fa-chevron-circle-left" aria-hidden="true" id="prev"></i>
    <img src="<%= @plan.image %>" id="target" style="width: 950px;
    max-width: 100%; height: 400px; padding-bottom: 15px; padding-top: 20px; ">
    <i class="fas fa-chevron-circle-right" aria-hidden="true" id="next"></i>
  </div>
  <div class="king">
    <ul class="example">
        <li class="current"><img src="<%= @plan.image %>" alt="写真1" style=" width: 154px; height: 123px;"></li>
        <li><img src="<%= @plan.copy_image %>" alt="写真2" style="width: 154px; height: 123px;"></li>
        <li><img src="<%= @plan.second_image %>" alt="写真3" style="width: 154px; height: 123px;"></li>
        <li><img src="<%= @plan.third_image %>" alt="写真4" style="width: 154px; height: 123px;"></li>
        <li><img src="<%= @plan.fourth_image %>" alt="写真5" style="width: 154px; height: 123px;"></li>
        <li><img src="<%= @plan.five_image %>" alt="写真6" style="width: 154px; height: 123px;"> </li>
        
    </ul>
</div>

<script src="javascripts/main.js"></script>
<script>
      var files = [
      '<%= @plan.image %>',
      '<%= @plan.copy_image %>',
      '<%= @plan.second_image %>',
      '<%= @plan.third_image %>',
      '<%= @plan.fourth_image %>',
      '<%= @plan.five_image %>'
      ];
</script>

Comments

[wwbQzhMkhhgEmhU]

ruby？もturbolinksも使ったことないですが、チラっと調べたところ、turbolinksはDOMを保存して差し替えるそうなので、loadイベントで毎回イベントリスナーを追加することになってませんか？
そのページを表示する度にリスナーの呼ばれる回数＝1度にスライドする枚数が増えていってたら、多分そうだと思います。ボタンがnullになるカラクリには繋がってないし、まあ、違っていそうですけど、何も情報がないよりマシということで。。。

[avicii]

この場合、どうすれば解決することができるでしょうか？

[wwbQzhMkhhgEmhU]

解決は原因から現象まで正確に繋がってからなので。まずは原因解明かと。。。
私には再現環境もないですし、rubyも分からないので、この程度の推測しかできないということです

[avicii]

ありがとうございます。