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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

1回答

373閲覧

複数のプルダウンメニューによる画像変更

hain

総合スコア25

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

2クリップ

投稿2017/08/23 12:36

編集2022/01/12 10:55

###前提・実現したいこと
monacaを使用しHTMLとJavascriptでコードを書いています。
恥ずかしながらアプリを作るのは初めてで現状の問題点が自力で解決できず手が動かない状態です。どうかお力をお貸しください

・実現したいことは
1か所にまとめてある5枚の画像に対して2種類の色を用意し
1つ目のプルダウンメニューで三角の色を変えるを選択すると三角形の色が変わり
2つ目で星形の色を変えるを選択すると星形の色が変わる(三角形の色の変更は維持しています)

###HTML/Javascriptで記述しています

<body id="start"> <SCRIPT language="JavaScript"> <!-- function look() { test1=document.change.menu.selectedIndex; image=document.change.menu.options[test1].value; document.war.src=image; } function look2() { test2=document.change.menu.selectedIndex; image=document.change.menu.options[test2].value; document.war2.src=image; } function look3() { test3=document.change.menu.selectedIndex; image=document.change.menu.options[test3].value; document.war3.src=image; } function look4() { tes4=document.change.menu.selectedIndex; image=document.change.menu.options[test4].value; document.war4.src=image; } function look5() { test5=document.change.menu.selectedIndex; image=document.change.menu.options[test5].value; document.war5.src=image; } //--> </SCRIPT> <div class="content" style="text-align: center"> <select name=”選択肢”onchange="look(),look2(),look3(),look4(),look5();"> <option value=”noon”></option> <option value="images/sankaku.png" >三角の色を変える</option> <option value="images/sikaku.png">四角の色を変える</option> <option value="images/hosi.png" >星形の色を変える</option> <option value="images/gokaku.png" >五角形の色を変える</option> <option value="images/rokkaku.png" >六角形の色を変える</option> </select> <select name=”選択肢”onchange="look(),look2(),look3(),look4(),look5();"> <option value=”noon”></option> <option value="images/sankaku.png" >三角の色を変える</option> <option value="images/sikaku.png">四角の色を変える</option> <option value="images/hosi.png" >星形の色を変える</option> <option value="images/gokaku.png" >五角形の色を変える</option> <option value="images/rokkaku.png" >六角形の色を変える</option> </select> <select name=”選択肢”onchange="look(),look2(),look3(),look4(),look5();"> <option value=”noon”></option> <option value="images/sankaku.png" >三角の色を変える</option> <option value="images/sikaku.png">四角の色を変える</option> <option value="images/hosi.png" >星形の色を変える</option> <option value="images/gokaku.png" >五角形の色を変える</option> <option value="images/rokkaku.png" >六角形の色を変える</option> </select> <select name=”選択肢” onchange="look(),look2(),look3(),look4(),look5();"> <option value=”noon”></option> <option value="images/sankaku.png" >三角の色を変える</option> <option value="images/sikaku.png">四角の色を変える</option> <option value="images/hosi.png" >星形の色を変える</option> <option value="images/gokaku.png" >五角形の色を変える</option> <option value="images/rokkaku.png" >六角形の色を変える</option> </select> <div class="image"> <img src="images/maru.png"> <img src="images/sankaku2.png" name="war"> <img src="images/sikaku2.png" name="war2"> <img src="images/hosi2.png" name="war3"> <img src="images/gokaku2.png" name="war4"> <img src="images/rokkaku2.png" name="war5"> </div> </div> </ons-page> </ons-template> </body> </html>

###現在の動作
プルダウンメニューで六角形の色を変えるを選択した場合
三角形の画像が消え、六角形の色が変わります。
同様にほかの選択肢を選んでも三角形(images/sankaku.png)が消え、他の画像が表示されます。

先にも記載いたしましたが、
六角形の色を変えるを選択すると
rokkaku2.pngがrokkaku.pngに変更され
星形の色を変えるを選択すると
hosi2.pngがhosi.pngに変更される

という形をそれぞれのプルダウンメニューから行えるようにしたいです。
どうぞよろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

namimon

2017/08/23 23:53

現在の設計はプルダウンですが、チェックボックス&ボタンではだめなのでしょうか?
m.ts10806

2017/08/24 00:54 編集

"が一部全角になっています。画像名も全角が入っていますが、間違いないですか?またvalueに「noon」が2つあるのはどういった意図でしょうか?
m.ts10806

2017/08/24 00:51

look4()にて tes43=document.change.menu.selectedIndex; となっていますが test4=document.change.menu.selectedIndex; の間違いではないでしょうか? 今のままだとimage=document.change.menu.options[test4].value;にて未定義変数を利用していることとなっています。
guest

回答1

0

「4つのセレクトボックスで、5つの画像(三角、四角、星、五角、六角)の色を変更する」という
UIがよくわらかないのと、記述してあるコードでは、もともと「三角の画像を表示している箇所(name="war")に四角や五角を入れられるような作りになっている」のがよく分からないのですが、、。

こんな感じでどうでしょうか?

<body> <SCRIPT language="JavaScript"> function look() { var flags = [false,false,false,false,false]; var images1 = [ "images/sankaku.png","images/sikaku.png","images/hosi.png","images/gokaku.png","images/rokkaku.png" ]; var images2 = [ "images/sankaku2.png","images/sikaku2.png","images/hosi2.png","images/gokaku2.png","images/rokkaku2.png" ]; for (var i=0;i<4;i++) { var test = document.querySelectorAll('select')[i].selectedIndex; var num = document.querySelectorAll('select')[i].options[test].value; if (num == "noon") { // DO nothing } else { flags[num-1] = true; } } for (var num=1;num<=5;num++) { document.querySelector('img[name="war' + num + '"]').src = flags[num-1] ? images1[num-1]:images2[num-1]; } } </SCRIPT> <div class="content" style="text-align: center"> <select name="選択肢" onchange="look()"> <option value=”noon”></option> <option value="1" >三角の色を変える</option> <option value="2">四角の色を変える</option> <option value="3" >星形の色を変える</option> <option value="4" >五角形の色を変える</option> <option value="5" >六角形の色を変える</option> </select> <select name="選択肢" onchange="look()"> <option value=”noon”></option> <option value="1" >三角の色を変える</option> <option value="2">四角の色を変える</option> <option value="3" >星形の色を変える</option> <option value="4" >五角形の色を変える</option> <option value="5" >六角形の色を変える</option> </select> <select name="選択肢" onchange="look()"> <option value=”noon”></option> <option value="1" >三角の色を変える</option> <option value="2">四角の色を変える</option> <option value="3" >星形の色を変える</option> <option value="4" >五角形の色を変える</option> <option value="5" >六角形の色を変える</option> </select> <select name="選択肢" onchange="look()"> <option value=”noon”></option> <option value="1" >三角の色を変える</option> <option value="2">四角の色を変える</option> <option value="3" >星形の色を変える</option> <option value="4" >五角形の色を変える</option> <option value="5" >六角形の色を変える</option> </select> <div class="image"> <img src="images/maru.png"> <img src="images/sankaku2.png" name="war1"> <img src="images/sikaku2.png" name="war2"> <img src="images/hosi2.png" name="war3"> <img src="images/gokaku2.png" name="war4"> <img src="images/rokkaku2.png" name="war5"> </div> </div> </body>

投稿2017/08/24 12:53

KNaito

総合スコア376

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問