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

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

ただいまの
回答率

90.47%

  • JavaScript

    16982questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • 関数

    223questions

    関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

JavaScript 引数、関数の汎用化 画像動画CSS

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 706

may88seiji

score 63

前提・実現したいこと

前提
画像をクリックすると埋め込まれた動画に切り替わるサイトを作成しました。

実現したいこと
現在、1つの画像に対して、1つの関数を指定しています。(下記コードでは、計4組)
こちらの関数を汎用化して、画像を増やしても1つの関数で対応できるようしたいと思っています。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>関数の汎用化</title>
    <style>
        .item {
            width: 25%;
            float: left;
            padding-bottom: 5%;

        }
        .item-box {
            height: 200px;
            width: 200px;
            margin: auto;
            background-color: #11D8B3;
            border-radius: 5px;
        }
        #movie1{
            display: none;
        }

        #movie2{
            display: none;
        }

        #movie3{
            display: none;
        }

        #movie4{
            display: none;
        }
    </style>
</head>
<body>
<!--ここから画像と動画-->
    <div class="item">
        <div class="item-box"><div id="img1" onclick="change1();return false"><img src="img.jpeg" width="200" height="200" alt=""></div>    
              <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/SIKSc397sn4"  allowfullscreen></iframe>
        </div>
    </div>

    <div class="item">
        <div class="item-box"><div id="img2" onclick="change2();return false"><img src="img.jpeg" width="200" height="200" alt=""></div>    
              <iframe id="movie2" width="200" height="200" src="https://www.youtube.com/embed/yWP6Qki8mWc"  allowfullscreen></iframe>
        </div>
    </div>

    <div class="item">
        <div class="item-box"><div id="img3" onclick="change3();return false"><img src="img.jpeg" width="200" height="200" alt=""></div>    
              <iframe id="movie3" width="200" height="200" src="https://www.youtube.com/embed/uZMQU4c1pEg"  allowfullscreen></iframe>
        </div>
    </div>

    <div class="item">
        <div class="item-box"><div id="img4" onclick="change4();return false"><img src="img.jpeg" width="200" height="200" alt=""></div>    
              <iframe id="movie4" width="200" height="200" src="https://www.youtube.com/embed/70-WSgZn1MQ"  allowfullscreen></iframe>
        </div>
    </div>

<!--ここから関数-->
<script type="text/javascript">
  function change1(){
    document.getElementById("img01").style.display="none";
    document.getElementById("movie1").style.display="block";
  };

     function change2(){
    document.getElementById("img02").style.display="none";
    document.getElementById("movie2").style.display="block";
  };

    function change3(){
    document.getElementById("img03").style.display="none";
    document.getElementById("movie3").style.display="block";
  };

    function change4(){
    document.getElementById("img04").style.display="none";
    document.getElementById("movie4").style.display="block";
  };

</script>

    </body>
</html>

試したこと

配列を作成し、添字を引数として関数に引き渡すように下記コードを組み込みましたが、クリック後に反応はありません。。。

<!--画像-->
    <div class="item">
        <div class="item-box"><div id="img01" onclick="change(0);return false"><img src="img.jpeg" width="200" height="200" alt=""></div>    
              <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/SIKSc397sn4"  allowfullscreen></iframe>
        </div>
    </div>
<!--関数-->
<script type="text/javascript">
    var img = [1,2,3,4];
    var movie=[1,2,3,4];
  function change(i){
    document.getElementById("img[i]").style.display="none";
    document.getElementById("movie[i]").style.display="block";
  };
</script>


皆様には関数を汎用化方法についてお教えいただければ幸いです。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

idを指定している部分ですが"img[i]"はそのまま文字列として扱われてしまうので

document.getElementById("img"+img[i]).style.display="none";
document.getElementById("movie"+movie[i]).style.display="block";


とする必要があります。
また配列に入れてる値ですが指定したいIDがimg01なので

var img = ["01","02","03","04"];
var movie=["01","02","03","04"];

ですが、このケースでしたら

<div id="img01" onclick="change(this);">


として
画像のidをimg01,img02,img03
動画のidをmovie01,movie02,movie03
と両方とも2桁の数字に揃える
javascriptは

function change(element){
  var id = element.id;
  var mid = id.replace('img','movie');
  element.style.display="none";
  document.getElementById(mid).style.display="block";
  return false;
};


とすれは配列も不要になります。

var id = element.id;はclickされたdivのidを取得していますので例えばimg01が変数idの値になります。
これを動画のidが指定できるようにid.replace('img','movie')でimgをmovieに置換してmovie01にしています。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/16 22:58

    回答ありがとうございます。汎用化の際のidや配列の扱いついて丁寧に記述いただき、大変勉強になりました。
    画像以外にも、いろいろと応用してみようと思います。

    キャンセル

  • 2016/05/16 23:02

    1つ書き忘れました
    return flase;
    はhtmlに毎回書くよりは関数側で書いてしまうほうがスッキリすると思います

    キャンセル

  • 2016/05/17 19:32

    ありがとうございます。無事組み込むことができました。

    理解の補足をおねがいしたいのですが、、、
    <div id="img01" onclick="change(this);">の(this)が、function change(element)でなぜ(element)に置き換わるのでしょうか。→要素名を変更するため?

    element.style.display="none";はなぜdocument.getElementByIdがついていないのでしょうか?→クリックしたelementが指定されている?

    よければ補足いただければ幸いです。

    キャンセル

  • 2016/05/17 19:52

    別にthisでもいいんですが
    onclick="change(this);(こっちは変えちゃだめです)
    の部分のthisはdiv.img01自身のことですよね、関数の引数に自分という要素を渡しています。

    受け取る方の関数はchange(element)で何かしらの要素を関数の引数として受け取っています、eでもyousoでもxでも動作には問題ありませんが、後日コードをみたときにelementとなっていれば引数の名前からなんらかの要素を受け取ってるのかな?と推測できるようにです。

    キャンセル

  • 2016/05/17 19:56

    早い回答ありがとうございます。理解いたしました。些細なことですが、聞いて良かったです。

    キャンセル

+1

自分だったら、こんな感じで渡して
onclick="change('1');return false"

<script type="text/javascript">
  function change(num){
    document.getElementById("img0"+num).style.display="none";
    document.getElementById("movie"+num).style.display="block";
  };
</script>


may88seijiさんのも、同様な感じで
ちょっと修正したらいけるんじゃないスか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/16 22:53

    ありがとうございます。無事に汎用化することができました。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16982questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • 関数

    223questions

    関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。