###前提・実現したいこと
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に変更される
という形をそれぞれのプルダウンメニューから行えるようにしたいです。
どうぞよろしくお願いいたします。