- ベストアンサー
【HP作成】プルダウンメニューを使ったページ作成について
プルダウンメニュー1 赤 青 プルダウンメニュー2 黄 白 このようにプルダウンメニュー1と2から1つずつ色を選択して[結果]ボタンを押すと混ぜた結果どのような色になるかページ内に表示される。 こんなようなページを作りたいのですが、色々と検索しても見つからず、最近HPを作り始めたばかりの初心者なので自分でコード(？)を組むこともできません。 ご教授お願いしますm(_ _)m
- freddie-mk
- お礼率87% (7/8)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
単純に対比表つくっておいて表示するだけでよいのでは？ <script> function setcol(f){ var list={赤黄:"橙色",赤白:"桃色",青黄:"緑",青白:"水色"}; f.res.value=list[f.color1.value+f.color2.value]; } </script> <form> <p> <select name="color1"> <option value="赤">赤</option> <option value="青">青</option> </select> / <select name="color2"> <option value="黄">黄色</option> <option value="白">白</option> </select> </p> <p> <input type="text" name="res"><input type="button" value="結果" onClick="setcol(this.form)"> </p> </form>
その他の回答 (3)
最初に断っておきます！ 作る気はありあせん！ ですがこれから作ってくれるであろう人のために質問します 黄色+紫 赤+水色 などはどう表現しますか？ またテキストで表現する色の言葉の種類は？
お礼
ご回答ありがとうございました。 まずは基本的なことを一から勉強してから出直します。
<html> <form> <p> 1:<select id="a" onChange="setcol()"> <option value="255,255,255">白</option> <option value="255,0,0">赤</option> <option value="255,128,0">オレンジ</option> <option value="255,255,0">黄色</option> <option value="128,255,0">黄緑</option> <option value="0,255,0">緑</option> <option value="0,0,255">青</option> <option value="255,0,255">紫</option> </select> / 2:<select id="b" onChange="setcol()"> <option value="255,255,255">白</option> <option value="255,0,0">赤</option> <option value="255,128,0">オレンジ</option> <option value="255,255,0">黄色</option> <option value="128,255,0">黄緑</option> <option value="0,255,0">緑</option> <option value="0,0,255">青</option> <option value="255,0,255">紫</option> </select> <script> function setcol(){ var c1=document.getElementById('a').value.split(','); var c2=document.getElementById('b').value.split(','); var c3=[-(-c1[0]-c2[0])/2|0,-(-c1[1]-c2[1])/2|0,-(-c1[2]-c2[2])/2|0]; document.body.style.backgroundColor=(c3[0]<<16)+(c3[1]<<8)+c3[2]; } </script>
お礼
ご回答ありがとうございます。 このプログラムはうまく動いたのですが、背景の色を変えるのではなく、何色になるかの結果をテキストで表示したいのです。 (本当は色ではなく、2つの選択肢の組み合わせでどのような結果になるかテキストで表示させたい) わかり辛くてすみません。Javascriptはこれから勉強しようと思っていますが、このページだけはどうしても先に作っておきたくて… 何卒よろしくお願いいたします。
- Gizensha
- ベストアンサー率34% (207/608)
最低限「JavaScript」などの知識が必要になります。 色については「RGB」といった形式で扱われることが多いですので、こちらも併せて勉強することになるでしょう。 # 色の混ぜ方には加法混色と減法混色があるので、そちらについても調べてみてください。
お礼
全くの初心者にいただきありがとうございました。 これから色々なHPを参考にしながら基本的なことから学んでいこうと思います。 助かりました。