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

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

ただいまの
回答率

88.63%

ラジオボタンの組み合わせで画像切替方法

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,884

shio

score 26

お世話になっております。

ラジオボタンの組み合わせでリンク切替と画像切替をしたく
参考サイトを調べながら構築していき、「リンクの切替」はできたのですが、
どうしても「画像切替」ができなく行き詰まっております。。。

どうか先生方のお力添えをお願いしたいです。
初心者ですのでコードがむちゃくちゃかもしれませんが何卒宜しくお願いします(汗)

        <div class="wrapper">

          <img src="http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}" id="innerLink" onclick="img()">

            <div>カラー</div><div id="inner_message">カラーを選択してください。</div>
            <div>サイズ</div><div id="outer_message">サイズを選択してください。</div>

            <form method="post" name="testpage">

                <p>
                    ■カラー<br>

                    <label>
                        <input type="radio" name="inner" onclick="inner01()" value="赤" checked><span></span>
                    </label>

                    <label>
                        <input type="radio" name="inner" onclick="inner02()" value="白"><span></span>
                    </label>
                </p>

                <p>
                    ■サイズ<br>

                    <label>
                        <input type="radio" name="outer" onclick="outer01()" value="100" checked>
                        <span>100</span>
                    </label>

                    <label>
                        <input type="radio" name="outer" onclick="outer02()" value="200">
                        <span>200</span>
                    </label>

                </p>

                <input type="button" value="リンク" onclick="link()">

            </form>

        </div><!--/.wrapper-->
.wrapper {
     margin: 0 auto;
     width: 950px;
}
    function inner01(){
        document.getElementById("inner_message").innerHTML = "赤";
    }

    function inner02(){
        document.getElementById("inner_message").innerHTML = "白";
    }

    //outer

    function outer01(){
        document.getElementById("outer_message").innerHTML = "100";
    }

    function outer02(){
        document.getElementById("outer_message").innerHTML = "200";
    }

    // img
    function img() {
        if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true ) {
            var elmt = document.getElementById("innerLink");
            elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}";
        } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true ){
            var elmt = document.getElementById("innerLink");
            elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100";

        } else if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true ){
            var elmt = document.getElementById("innerLink");
            elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}";

        } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true ){
            var elmt = document.getElementById("innerLink");
            elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}";
        }
    }

    // link
    function link()   {
        if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true ) {
            window.location.href =("00-00.html")
        } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true ) {
            window.location.href =("01-00.html")
        } else if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true ) {
            window.location.href =("00-01.html")
        } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true ) {
            window.location.href =("01-01.html")
        }
    }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • x_x

    2018/11/21 17:44

    現状で「画像をクリックすると画像が切り替わる」機能ができていると思いますが、まだ何か問題があれば追記してください。ないのであれば解決としてください。

    キャンセル

  • shio

    2018/11/21 19:16

    ご指摘ありがとうございます!まだ、ラジオボタンの組合せで画像が切り替わるまで至ってないので解決しておりません。現在seastar3様の回答を試していますがまだうまくいって無いです;;

    キャンセル

  • x_x

    2018/11/22 09:42

    「画像をクリックしたら」変わるのですよね?(imgのonclickで書いてますし) そうでないなら質問文に明記してください。回答者もそのタイミングと思っているはずです

    キャンセル

  • shio

    2018/11/22 10:14

    ご指摘ありがとうございます!おっしゃる通りでした...!解決していますm(_ _)m

    キャンセル

回答 2

+2

<img src="http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}" name="innerLink" onclick="img()">


の name="innerLink" を id="innerLink" にする。( id属性の追加でもよい。)

document.innerLink.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}"


等が

    var elmt = document.getElementById('innerLink');
    elmt.src = 'http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}';


と各部を差し替えることで、<img>タグをid属性を手掛かりに捉えて、src属性を入れ替えることができます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/20 17:44

    seastar3様
    ご回答、誠にありがとうございます!お返事が遅くなり申し訳ありません。

    コードをご指摘のように修正してみたのですが、
    やはり画像を切替えるように動いてくれませんでした。。

    変更したのはご指摘いただいた部分のみです。
    なにか記述ミスがありますでしょうか?(汗)
    teratailのコードも修正しております。

    何度もお手数をおかけしてすみませんが
    ご教授いただければ幸いでございますm(_ _)m

    キャンセル

checkベストアンサー

+1

img()メソッドの中のif文が{ }でくくられていないので、2行セットで動作しないようです。少々編集すれば、以下のような形式になります。

       if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true ) {
            var elmt = document.getElementById("innerLink");
            elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}";
        } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true ){
            var elmt = document.getElementById("innerLink");
            elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100";

        } else if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true ){
            var elmt = document.getElementById("innerLink");
            elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}";

        } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true ){
            var elmt = document.getElementById("innerLink");
            elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}";
        }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/20 18:59

    seastar3様
    迅速なご回答誠にありがとうございます!

    ご指摘いただいたとおり
    img()メソッドを編集させていただきました!

    しかしまだ画像を入れ替えるまでに至っておりません。。

    私が編集した内容をteratailのコードも同じく編集しております。

    何度もお手数をおかけして申し訳ありません。
    今一度お力添えいただければ幸いでございますm(_ _)m

    キャンセル

  • 2018/11/20 22:29

    問題を切り分けていき、原因を突き止める必要があります。if文抜きでクリックしたら、dで名前を決めたimgタグの中身を書き換えるメソッド( 仮にShowimg()メソッド )を用意して、ボタンに押したらこのShowimg()メソッドを呼び出して画像が出てくるか試してみて下さい。これが動作したら、if文を拡張していけばできるようになると思います。

    キャンセル

  • 2018/11/22 10:15

    seastar3様
    ご丁寧に教えていただきありがとうございました!解決いたしましたm(_ _)m

    キャンセル

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

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

関連した質問

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