特定のhtmlファイルのみでjsを発火させたい。

Question

前提・実現したいこと

index.html.haml内のみでjsファイルを適用したいです。
ご教示お願い致します。

発生している問題・エラーメッセージ

他のページに遷移した際もjsファイルが読み込まれてしまい、
エラーが発生してしまいます。

Uncaught TypeError: Cannot read property 'classList' of undefined
at switchImage

該当のソースコード

var elInner, duration, defaultIndex, switchImage;
elInner = document.getElementsByClassName('wrapper__photo__image');
duration = 5000;
defaultIndex = 0;
switchImage = function(next) { 
  var current = next ? (next - 1) : elInner.length - 1;
  elInner[current].classList.remove('is-visible');
  elInner[next].classList.add('is-visible');
  next = (++next < elInner.length) ? next : 0;
  setTimeout(switchImage.bind(this, next), duration);
};
window.onload = switchImage.bind(this, defaultIndex);

試したこと

下記URLの情報を元に5行目にif文を使ってみましたが、反応がしませんでした。
http://tokidoki-web.com/2013/02/%E3%80%8Ejquery%E3%81%A7%E7%89%B9%E5%AE%9A%E3%81%AEurl%E3%81%8C%E4%B8%80%E8%87%B4%E3%81%97%E3%81%9F%E3%82%89%E5%87%A6%E7%90%86%E3%81%97%E3%81%A6%E3%82%84%E3%82%93%E3%82%88%E3%80%8F/

var elInner, duration, defaultIndex, switchImage;
elInner = document.getElementsByClassName('wrapper__photo__image');
duration = 5000;
defaultIndex = 0;
if(document.URL.indexOf("index.html.haml")) {
switchImage = function(next) { 
  var current = next ? (next - 1) : elInner.length - 1;
  elInner[current].classList.remove('is-visible');
  elInner[next].classList.add('is-visible');
  next = (++next < elInner.length) ? next : 0;
  setTimeout(switchImage.bind(this, next), duration)};
};
window.onload = switchImage.bind(this, defaultIndex);

Answer 1

やり方はいろいろとあるのですが、全体のHTMLがわからないのでとりあえずwrapper__photo__imageクラスがあれば実行させる感じとかはいかがでしょうか？

var elInner, duration, defaultIndex, switchImage;
elInner = document.getElementsByClassName('wrapper__photo__image');
duration = 5000;
defaultIndex = 0;

if(elInner.length) {
  switchImage = function(next) { 
    ：
  };
};

まぁ、その他Turbolinksを利用しているのか、他のページでもwrapper__photo__imageがあるのかなどで検討する必要がありますね。

あとは、アクション名controller.action_nameや、コントローラー名controller.controller_nameで条件分岐してjsを読み込ませたり・・・

---

細かいところはおまかせしますが、変数elInnerがあれば実行させるという形ですね。

Comments

[shimpext]

ご回答ありがとうございます。
htmlファイルを添付いたします。
4枚画像を登録しており、一定時間で切り替わるという処理をさせようと思っています。

下記のようにjsファイルを修正しましたが、１行目でUncaught ReferenceError: elInner is not definedが起きました。書き方が間違っていますでしょうか？何度も質問してしまい申し訳ございません。

jsファイル
```
if(elInner.length) {
switchImage = function(next) {
var elInner, duration, defaultIndex, switchImage;
elInner = document.getElementsByClassName('wrapper__photo__image');
duration = 5000;
defaultIndex = 0;
switchImage = function(next) {
var current = next ? (next - 1) : elInner.length - 1;
elInner[current].classList.remove('is-visible');
elInner[next].classList.add('is-visible');
next = (++next < elInner.length) ? next : 0;
setTimeout(switchImage.bind(this, next), duration);
}
};
};
```

[no1knows]

修正しました！

[shimpext]

ご返信ありがとうございます。
下記のように修正し、エラーは出ませんが、発火もされなくなってしまいました。何度も教えていただいているのに解決できず、申し訳ございません。
問題点がありましたら、教えていただきたいです。

var elInner, duration, defaultIndex, switchImage;
elInner = document.getElementsByClassName('wrapper__photo__image');
duration = 5000;
defaultIndex = 0;
if(elInner.length) {
switchImage = function(next) {
var current = next ? (next - 1) : elInner.length - 1;
elInner[current].classList.remove('is-visible');
elInner[next].classList.add('is-visible');
next = (++next < elInner.length) ? next : 0;
setTimeout(switchImage.bind(this, next), duration)
};
};

下記のコードもつけてみましたが、それだとエラーが出ます。
window.onload = switchImage.bind(this, defaultIndex);

[no1knows]

Turbolinksを利用しているなら
$(document).on('turbolinks:load', function() { });
でうまくいきましたか？

[shimpext]

ご返信ありがとうございます！
うまくいきました！
本当にありがとうございました！！！