質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.06%

javascriptでスライドショーを実装したいのですが、クリックしても動かない状態になっています。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 578

avicii

score 39

ruby on rails4でjavascriptsを使い、現在スライドショーを実装しようしています。しかし、右クリックしたら、動く設定にしているのですが、動かない状態になっています。どうぞ教えていただきたいです。

イメージ説明

 <!DOCTYPE html>
<html lang="ja">
<html>
  <head>
    <title>Chance to Chance</title>
    <meta name="viewpoint" content="width=devise-width,initial-scale=1.0">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags  %>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Unica+One::latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
  </head>
  <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; 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.copy_image %>"></li>
        <li><img src="<%= @plan.copy_image %>"></li>
        <li><img src="<%= @plan.copy_image %>"></li>
        <li><img src="<%= @plan.copy_image %>"></li>
        <li><img src="<%= @plan.copy_image %>"></li>
    </ul>
  </div>
  <script src="javascripts/main.js"></script>
 (function() {
  'use strict';

  var files = [
    '<%= @plans.copy_image %>',
    '<%= @plans.copy_image %>',
    '<%= @plans.copy_image %>',
    '<%= @plans.copy_image %>',
    '<%= @plans.copy_image %>'
  ];

  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.david {
  width: 350px;
  height: 20px;
  padding-left: 10px;
  font-size: 13px;
  strong {
    font-size: 20px;
    padding-left: 15px;
  }
}

#prev, #next {
  cursor: pointer;
  font-size: 42px;
  color: #bbb;
  position: absolute;
  top: 90px;
}

.main {
  position: relative;
}

#prev {
  top: 180px;
  left: -60px;
}

#next {
  top: 180px;
  right: -60px;
}


div.king {
  width: 1000px;
  height: 100px;
}

div.example {
  padding: 0;
  margin: 0;
  list-style: none;
}

.example ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.example li {
  float: left;
  vertical-align: middle;
  width: 185px;
  height: 50px;
  cursor: pointer;
  opacity: 0.6;
}

.example li + li {
  margin-left: 6px;
}

.example li:hover {
  opacity: 1;
}

.example li.current {
  opacity: 1;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/01/03 01:25

    エラーは出ていませんか?デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

    キャンセル

  • avicii

    2019/01/03 02:43 編集

    もしかしたら、javascriptsが反応していないかもしれません。どう変化を加えると、javascriptが動くようになるのでしょうか?
    よろしくお願いします。

    キャンセル

  • avicii

    2019/01/05 06:25 編集

    大変申し訳ないです。javascriptのデベロッパーツールで問題を発見しました。
    Uncaught TypeError: Cannot read property 'addEventListener' of nullという問題が出ていました。特にprev.addEventListener('click', function() {の部分から引っかかってました。

    キャンセル

回答 1

checkベストアンサー

+1

動くサンプル:https://jsfiddle.net/v7mbkh1f/


提示されたJavaScriptで動くことが確認できました。「質問への追記・修正の依頼」で返信がもらえていない「エラーが出ているか」の部分の問題か、もしくはJavaScriptのパスが間違っているなどで読み込まれていないかどちらかでは。


追記:

Uncaught TypeError: Cannot read property 'addEventListener' of nullという問題が出ていました。特にprev.addEventListener('click', function() {の部分から引っかかってました。 

main.jsがHTMLの最後のほうに書かれていないとか、とにかくHTMLの描画順的にgetElementByIdで取得できない状態なのでは?
railsは不勉強なので別の方法をとる必要がある可能性がありますが、ロードを待つのが一般的な方法かなと。

document.addEventListener( 'DOMContentLoaded' , function( e ) {
    /* ここにコードを書く */
}, false );

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/05 19:52

    (function() { // これの代わり
    /* ここの部分 */
    })(); // これの代わり

    キャンセル

  • 2019/01/07 23:03

    度々ありがとうございます!!

    キャンセル

  • 2019/01/07 23:25

    動くようになりました!!しかし、画像が出ない状況になってます。これらの問題で動かなくなっているみたいです。
    GET http://localhost:3000/plans/javascripts/main.js 404 (Not Found)
    %3C%=%20@plan.copy_image%20%%3E:1
    GET http://localhost:3000/plans/%3C%=%20@plan.copy_image%20%%3E 400 (Bad Request)
    どうぞよろしくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る