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

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

ただいまの
回答率

87.61%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,081
退会済みユーザー

退会済みユーザー

いつもお世話になっております。

現状ラジオボタンの切り替えで
リンクの切り替えと、画像をクリックすると画像が切り替わるところまで実装できておりますが、

画像をクリックで切り替わるのではなく、
ラジオボタンを切り替えた時点で、画像が切り替わる仕様に変更したいと考えています。

調べて試してを繰り返しているのですが、うまくいかず行き詰っております...

勉強不足で申し訳ありません。
アドバイスを頂ければとてもうれしいですm(_ _)m

    <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;
}
<script>

    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")
        }
    }

</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

functionの分け方次第でより綺麗にかけそうです。
あくまで私ならですが・・・以下のようにします。

それぞれの要素をクリックした時に起きてほしい事を明確にし、その処理にどんな情報が必要かを整理していくとすっきりまとまるかと思います!

今回は、imgを独立したfunctionにしたのが設計上のミスといえるかもしれません。

//全てのfunctionで参照したい変数を定義
var imgColor = "red";
var imgSize = 100;

var imgElmt = document.getElementById("innerLink");

function inner01() {
  imgColor = "red";
  document.getElementById("inner_message").innerHTML = "赤";

  if (imgSize == 100) {
    imgElmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}";
  } else {
    imgElmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}";
  }
  return;
}

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

  if (imgSize == 100) {
    imgElmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100}";
  } else {
    imgElmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}";
  }
  return;
}


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

  if (imgColor == "red") {
    imgElmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}";
  } else {
    imgElmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100}";
  }
  return;
}

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

  if (imgColor == "red") {
    imgElmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}";
  } else {
    imgElmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}";
  }
  return;
}

// link
function link() {
  if (imgColor == "red" && imgSize == 100) {

    window.location.href = ("00-00.html");
  } else if (imgColor == "red" && imgSize == 200) {

    window.location.href = ("01-00.html");
  } else if (imgColor == "white" && imgSize == 100) {

    window.location.href = ("00-01.html")
  } else if (imgColor == "white" && imgSize == 200) {

    window.location.href = ("01-01.html")
  }
  return;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/17 19:55

    一から丁寧にご回答していただきありがとうございます!
    分かりやすくまとまったコードですね!

    私は設計の時点で間違っておりました。。
    考えを整理して処理できるようになりたいです><

    このたびは勉強になりました。本当にありがとうございます。

    キャンセル

0

ぱっと見なんで間違ってたらごめんなさい。
と前置きしておいて、

>ラジオボタンを切り替えた時点で、画像が切り替わる仕様に変更したいと考えています。
ラジオボタンをクリックしたときに走る処理はそれぞれ
inner01()、inner02()、outer01()、outer02()なのでその処理の後でimg()を呼び出したらどうでしょう?

function inner01() {
            document.getElementById("inner_message").innerHTML = "赤";
            img();
        }

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

        //outer

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/17 19:59

    ご回答、誠にありがとうございます。
    なるほど、教えていただいた処理を参考にもう一度やり直してみます。

    貴重なお時間をさいていただいて本当にありがとうございます。
    勉強します。

    キャンセル

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

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

関連した質問

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