<FORM name="BGM">
<SELECT name="change">
<OPTION selected>選曲♪</OPTION>
<OPTION value="○○○.mid">曲1</OPTION>
<OPTION value="○○○.mid">曲2</OPTION>
<OPTION value="○○○.mid ">曲3</OPTION>
<OPTION value="○○○.mid ">曲4</OPTION>
</SELECT>
<INPUT onclick="bgm_change()" type="button">
</FORM>
今、このような形で、<SELECT>を使ってBGMを4曲から選べる機能を成功させています。
この、<SELECT>の<OPTION>のプルダウンの内容を、
曜日ごとで変えたいと思っています。
今日の曜日を取得するJavascriptは、
Function WhatDayWeek() と言う名の関数で、
Week = new Array(7);
DATE = new Date();
thisweek = Week[DATE.getDay()];
以上のように作っていますが、
このJavascriptと、<SELECT><OPTION>をくっ付ける(反映させる)にはどう記述すればよいでしょうか?
関数自体、この3行では足りないんでしょうか・・。
どなたかご教授下さい。
No.6ベストアンサー
- 回答日時:
何かサービス残業させられてる気分なんですが、
まあ、乗りかかった船ということで・・・・
<html>
<head>
<script language="Javascript">
sun=new Array();
sun[0]=["日曜日曲1","sun1.mid"]
sun[1]=["日曜日曲2","sun2.mid"]
sun[2]=["日曜日曲3","sun3.mid"]
sun[3]=["日曜日曲4","sun4.mid"]
mon=new Array();
mon[0]=["月曜日曲1","mon1.mid"]
mon[1]=["月曜日曲2","mon2.mid"]
mon[2]=["月曜日曲3","mon3.mid"]
mon[3]=["月曜日曲4","mon4.mid"]
tue=new Array();
tue[0]=["火曜日曲1","tue1.mid"]
tue[1]=["火曜日曲2","tue2.mid"]
tue[2]=["火曜日曲3","tue3.mid"]
tue[3]=["火曜日曲4","tue4.mid"]
wen=new Array();
wen[0]=["水曜日曲1","wen1.mid"]
wen[1]=["水曜日曲2","wen2.mid"]
wen[2]=["水曜日曲3","wen3.mid"]
wen[3]=["水曜日曲4","wen4.mid"]
thu=new Array();
thu[0]=["木曜日曲1","thu1.mid"]
thu[1]=["木曜日曲2","thu2.mid"]
thu[2]=["木曜日曲3","thu3.mid"]
thu[3]=["木曜日曲4","thu4.mid"]
fri=new Array();
fri[0]=["金曜日曲1","fri1.mid"]
fri[1]=["金曜日曲2","fri2.mid"]
fri[2]=["金曜日曲3","fri3.mid"]
fri[3]=["金曜日曲4","fri4.mid"]
sat=new Array();
sat[0]=["土曜日曲1","sat1.mid"]
sat[1]=["土曜日曲2","sat2.mid"]
sat[2]=["土曜日曲3","sat3.mid"]
sat[3]=["土曜日曲4","sat4.mid"]
function WhatDayWeek(){
DATE = new Date();
thisweek = DATE.getDay();
change_op();
}
function change_op(){
for (i=sentaku.change.options.length;i>=1; i--) {
sentaku.change.options[i] = null;
}
switch(thisweek){
case 0:for(i=0;i<sun.length; i++){sentaku.change.options[i+1]=new Option(sun[i][0],sun[i][1]);}break;
case 1:for(i=0;i<mon.length; i++){sentaku.change.options[i+1]=new Option(mon[i][0],mon[i][1]);}break;
case 2:for(i=0;i<tue.length; i++){sentaku.change.options[i+1]=new Option(tue[i][0],tue[i][1]);}break;
case 3:for(i=0;i<wen.length; i++){sentaku.change.options[i+1]=new Option(wen[i][0],wen[i][1]);}break;
case 4:for(i=0;i<thu.length; i++){sentaku.change.options[i+1]=new Option(thu[i][0],thu[i][1]);}break;
case 5:for(i=0;i<fri.length; i++){sentaku.change.options[i+1]=new Option(fri[i][0],fri[i][1]);}break;
case 6:for(i=0;i<sat.length; i++){sentaku.change.options[i+1]=new Option(sat[i][0],sat[i][1]);}
}
}
function bgm_change(){
index=sentaku.change.selectedIndex;
kyoku=sentaku.change.options[index].value;
url = "http://*****/sound/bgm/"+kyoku;
if(index){
wmp.innerHTML="<embed src='"+url+"' width='280' height='40' type='audio/midi' autostart=TRUE repeat=FALSE loop=FALSE panel=1>"
}
}
window.onload=WhatDayWeek;
</script>
<noscript>
JavaScriptをONにして下さい
</noscript>
</head>
<body>
<br>
♪BGMをどうぞ♪
<br>
<div id="wmp">
<embed src="../sound/bgm/aaaaa.mid" width="280" height="40" type="audio/midi" autostart=TRUE repeat=FALSE loop=FALSE panel=1>
</div>
<br>
<form name="sentaku">
<select name="change">
<option value="">--選曲♪--</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<input type="button" value="BGM変更" onclick="bgm_change()">
</form>
</body>
</html>
.
No.5
- 回答日時:
WinXPのIE6.0・NN7.1・FF1.5で確認してますが、動作は問題ない(Winでは)はずです。
>参考にして、コードを書きました。
ご自分の書き間違えではないでしょうか・・
私の貼ったソースをコピーしてメモ帳に貼り、拡張しを.htmlに変えて
ブラウザで開いてみてください。
.
この回答への補足
ありがとうございます。
プルダウンの内容は出現するようになりました。
しかし、「BGM変更」ボタンを押すと、プルダウンとボタンの上に表示されているプラグインが、なぜか画面から消えてしまいます。どう対処すればよいでしょうか・・?
(IE6.0,FF1.5.0.1)
(下は、今のところ記述しているコードです。)
<script language="Javascript">
sun=new Array();
sun[0]=["日曜日曲1","/sun1.mid"]
sun[1]=["日曜日曲2","/sun2.mid"]
sun[2]=["日曜日曲3","/sun3.mid"]
sun[3]=["日曜日曲4","/sun4.mid"]
mon=new Array();
mon[0]=["月曜日曲1","/mon1.mid"]
mon[1]=["月曜日曲2","/mon2.mid"]
mon[2]=["月曜日曲3","/mon3.mid"]
mon[3]=["月曜日曲4","/mon4.mid"]
tue=new Array();
tue[0]=["火曜日曲1","/tue1.mid"]
tue[1]=["火曜日曲2","/tue2.mid"]
tue[2]=["火曜日曲3","/tue3.mid"]
tue[3]=["火曜日曲4","/tue4.mid"]
wen=new Array();
wen[0]=["水曜日曲1","/wen1.mid"]
wen[1]=["水曜日曲2","/wen2.mid"]
wen[2]=["水曜日曲3","/wen3.mid"]
wen[3]=["水曜日曲4","/wen4.mid"]
thu=new Array();
thu[0]=["木曜日曲1","/thu1.mid"]
thu[1]=["木曜日曲2","/thu2.mid"]
thu[2]=["木曜日曲3","/thu3.mid"]
thu[3]=["木曜日曲4","/thu4.mid"]
fri=new Array();
fri[0]=["金曜日曲1","/fri1.mid"]
fri[1]=["金曜日曲2","/fri2.mid"]
fri[2]=["金曜日曲3","/fri3.mid"]
fri[3]=["金曜日曲4","/fri4.mid"]
sat=new Array();
sat[0]=["土曜日曲1","/sat1.mid"]
sat[1]=["土曜日曲2","/sat2.mid"]
sat[2]=["土曜日曲3","/sat3.mid"]
sat[3]=["土曜日曲4","/sat4.mid"]
function WhatDayWeek(){
DATE = new Date();
thisweek = DATE.getDay();
change_op();
}
function change_op(){
obj=document.forms[0];
for (i=obj.change.options.length;i>=1; i--) {
obj.change.options[i] = null;
}
switch(thisweek){
case 0:for(i=0;i<sun.length; i++){obj.change.options[i+1]=new Option(sun[i][0],sun[i][1]);}break;
case 1:for(i=0;i<mon.length; i++){obj.change.options[i+1]=new Option(mon[i][0],mon[i][1]);}break;
case 2:for(i=0;i<tue.length; i++){obj.change.options[i+1]=new Option(tue[i][0],tue[i][1]);}break;
case 3:for(i=0;i<wen.length; i++){obj.change.options[i+1]=new Option(wen[i][0],wen[i][1]);}break;
case 4:for(i=0;i<thu.length; i++){obj.change.options[i+1]=new Option(thu[i][0],thu[i][1]);}break;
case 5:for(i=0;i<fri.length; i++){obj.change.options[i+1]=new Option(fri[i][0],fri[i][1]);}break;
case 6:for(i=0;i<sat.length; i++){obj.change.options[i+1]=new Option(sat[i][0],sat[i][1]);}
}
}
function bgm_change(){
var ob = document.getElementById("control")
kyoku = document.sentaku.change.selectedIndex;
sel = document.sentaku.change.options[kyoku].value;
if(kyoku!=0)
{
ob.innerHTML = "<embed src="+sel+" WIDTH=150 HEIGHT=40 PANEL=1 ShowPositionControls=0 ShowControls=1 ShowAudioControls=1 AUTOSTART=FALSE REPEAT=FALSE LOOP=FALSE>";
}}
window.onload=WhatDayWeek;
</script>
<noscript>
JavaScriptをONにして下さい
</noscript>
♪BGMをどうぞ♪
<DIV id=control>
<EMBED src="http://~~~/20060121125315.mid" width=150 height=40 type=audio/midi AUTOSTART="FALSE" REPEAT=FALSE LOOP=FALSE PANEL="1"></DIV>
<form name="sentaku">
<select name="change">
<option value="">--選曲♪--</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<input type="button" value="BGM変更" onclick="bgm_change()">
</form>
すみません、時間を置いてもう一度試してみましたら、
成功しました!
ただ時間を置いただけで、設定を何も変えずに試したらうまく行ったので、何が原因だったのか分からないのですが(^^;
非常に参考になるコードをありがとうございました!!
No.4
- 回答日時:
すみません。
先ほどのは変数の一部がコピーしたまま書き換えてなかったので修正したものを貼り直します。
<script>
sun=new Array();
sun[0]=["日曜日曲1","/sun1.mid"]
sun[1]=["日曜日曲2","/sun2.mid"]
sun[2]=["日曜日曲3","/sun3.mid"]
sun[3]=["日曜日曲4","/sun4.mid"]
mon=new Array();
mon[0]=["月曜日曲1","/mon1.mid"]
mon[1]=["月曜日曲2","/mon2.mid"]
mon[2]=["月曜日曲3","/mon3.mid"]
mon[3]=["月曜日曲4","/mon4.mid"]
tue=new Array();
tue[0]=["火曜日曲1","/tue1.mid"]
tue[1]=["火曜日曲2","/tue2.mid"]
tue[2]=["火曜日曲3","/tue3.mid"]
tue[3]=["火曜日曲4","/tue4.mid"]
wen=new Array();
wen[0]=["水曜日曲1","/wen1.mid"]
wen[1]=["水曜日曲2","/wen2.mid"]
wen[2]=["水曜日曲3","/wen3.mid"]
wen[3]=["水曜日曲4","/wen4.mid"]
thu=new Array();
thu[0]=["木曜日曲1","/thu1.mid"]
thu[1]=["木曜日曲2","/thu2.mid"]
thu[2]=["木曜日曲3","/thu3.mid"]
thu[3]=["木曜日曲4","/thu4.mid"]
fri=new Array();
fri[0]=["金曜日曲1","/fri1.mid"]
fri[1]=["金曜日曲2","/fri2.mid"]
fri[2]=["金曜日曲3","/fri3.mid"]
fri[3]=["金曜日曲4","/fri4.mid"]
sat=new Array();
sat[0]=["土曜日曲1","/sat1.mid"]
sat[1]=["土曜日曲2","/sat2.mid"]
sat[2]=["土曜日曲3","/sat3.mid"]
sat[3]=["土曜日曲4","/sat4.mid"]
function WhatDayWeek(){
DATE = new Date();
thisweek = DATE.getDay();
change_op();
}
function change_op(){
obj=document.forms[0];
for (i=obj.change.options.length;i>=1; i--) {
obj.change.options[i] = null;
}
switch(thisweek){
case 0:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],sun[i][1]);}break;
case 1:for(i=0;i<mon.length;i++){obj.change.options[i+1]=new Option(mon[i][0],mon[i][1]);}break;
case 2:for(i=0;i<tue.length;i++){obj.change.options[i+1]=new Option(tue[i][0],tue[i][1]);}break;
case 3:for(i=0;i<wen.length;i++){obj.change.options[i+1]=new Option(wen[i][0],wen[i][1]);}break;
case 4:for(i=0;i<thu.length;i++){obj.change.options[i+1]=new Option(thu[i][0],thu[i][1]);}break;
case 5:for(i=0;i<fri.length;i++){obj.change.options[i+1]=new Option(fri[i][0],fri[i][1]);}break;
case 6:for(i=0;i<sat.length;i++){obj.change.options[i+1]=new Option(sat[i][0],sat[i][1]);}
}
}
function bgm_change(){}
window.onload=WhatDayWeek;
</script>
<body>
<form name="BGM">
<select name="change">
<option value="">--選曲♪--</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<input type="button" value="BGM変更" onclick="bgm_change()">
</form>
</body>
.
この回答への補足
とても難しいのですね・・詳しく書いて頂きありがとうございます。
参考にして、コードを書きました。が、スミマセン、恐縮なのですが、修正版を使用させていただきまして、ブラウザで確認したところ、プルダウンの内容が一つも出なくなってしまいました。
Frontpageに移し変えて、プレビューを見たところ、
「thisweekが宣言されていません」という内容が出ます。
これはどのように対処すればよいでしょうか?
No.3
- 回答日時:
javascriptの基本の部分がまだ良くお分かりではないようですね。
お書きになっているスクリプトは文法や構文が間違ってます。
サンプルを書きましたので参考にして下さい。
<script>
sun=new Array();
sun[0]=["日曜日曲1","/sun1.mid"]
sun[1]=["日曜日曲2","/sun2.mid"]
sun[2]=["日曜日曲3","/sun3.mid"]
sun[3]=["日曜日曲4","/sun4.mid"]
mon=new Array();
mon[0]=["月曜日曲1","/mon1.mid"]
mon[1]=["月曜日曲2","/mon2.mid"]
mon[2]=["月曜日曲3","/mon3.mid"]
mon[3]=["月曜日曲4","/mon4.mid"]
tue=new Array();
tue[0]=["火曜日曲1","/tue1.mid"]
tue[1]=["火曜日曲2","/tue2.mid"]
tue[2]=["火曜日曲3","/tue3.mid"]
tue[3]=["火曜日曲4","/tue4.mid"]
wen=new Array();
wen[0]=["水曜日曲1","/wen1.mid"]
wen[1]=["水曜日曲2","/wen2.mid"]
wen[2]=["水曜日曲3","/wen3.mid"]
wen[3]=["水曜日曲4","/wen4.mid"]
thu=new Array();
thu[0]=["木曜日曲1","/thu1.mid"]
thu[1]=["木曜日曲2","/thu2.mid"]
thu[2]=["木曜日曲3","/thu3.mid"]
thu[3]=["木曜日曲4","/thu4.mid"]
fri=new Array();
fri[0]=["金曜日曲1","/fri1.mid"]
fri[1]=["金曜日曲2","/fri2.mid"]
fri[2]=["金曜日曲3","/fri3.mid"]
fri[3]=["金曜日曲4","/fri4.mid"]
sat=new Array();
sat[0]=["土曜日曲1","/sat1.mid"]
sat[1]=["土曜日曲2","/sat2.mid"]
sat[2]=["土曜日曲3","/sat3.mid"]
sat[3]=["土曜日曲4","/sat4.mid"]
function WhatDayWeek(){
DATE = new Date();
thisweek = DATE.getDay();
change_op();
}
function change_op(){
obj=document.forms[0];
for (i=obj.change.options.length;i>=1; i--) {
obj.change.options[i] = null;
}
switch(thisweek){
case 0:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],sun[i][1]);}break;
case 1:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],mon[i][1]);}break;
case 2:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],tue[i][1]);}break;
case 3:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],wen[i][1]);}break;
case 4:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],thu[i][1]);}break;
case 5:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(fri[i][0],fri[i][1]);}break;
case 6:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],sat[i][1]);}
}
}
function bgm_change(){}
window.onload=WhatDayWeek;
</script>
<body>
<form name="BGM">
<select name="change">
<option value="">--選曲♪--</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<input type="button" value="BGM変更" onclick="bgm_change()">
</form>
</body>
.
No.2
- 回答日時:
そこまで来ていればあと一息です。
JavaScriptではif()やswitch()といった関数で、処理を分岐させる事が出来ます。
例)
if( thisweek == 0 )
{
// 0の場合の処理
}
else if( thisweek == 1 )
{
// 1の場合の処理
}
else
{
// 0でも1でもない場合の処理
}
switch( thisweek )
{
case 0:
// 0の場合の処理
break;
case 1:
// 1の場合の処理
break;
default:
// 0でも1でもない場合の処理
break;
}
そして、OPTIONの中身を書き換える方法。
JavaScriptで
change[xx].value で changeというSELECTのxx番目のOPTIONのvalue値を、
change[xx].text で changeというSELECTのxx番目のOPTIONのテキスト(<OPTION></OPTION>で挟んでいる文字列)
を取得、変更する事が出来ます。
これらを使って曜日ごとに処理を分岐し、OPTIONの値を変更させてみてください。
ただし、ソースを覗かれてしまうと他の曜日の.mid名などがわかってしまいますので、
それらを見られたくない場合はCGI等を使う必要があります。
この回答への補足
ありがとうございます!
今、アドバイスを参考に、Javascript部にこのように記述しています。
function WhatDayWeek()
{
var Week = new Array(7);
var DATE = new Date();
var thisweek = Week[DATE.getDay()];
switch( thisweek )
{
case 0:
// 0の場合の処理
mychange[2].value = "http://~~~/○○○.mid";
mychange[2].text = "曲名1";
break;
case 1:
// 1の場合の処理
mychange[2].value = "http://~~~/○○○.mid";
mychange[2].text = "曲名2";
break;
default:
// 0でも1でもない場合の処理
break;
}
}
このように日~土までの分を書いています。
<SELECT><OPTION>部はそのまま書いています。
しかし、ブラウザで読み込んでみても、曲が全く変わりません。
曲名も変わっていません。
varを外してみたり、case 0: というのをcase "日":とかcase[0]:と書いてみたり(笑)、
いろいろ試してみますが、音沙汰ないと言った感じです。これからどう記述すればよいでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
セレクトボックスのselected属...
-
JSONで文字列が長い時
-
Application.ScreenUpdating = ...
-
VBAでPDFのコピーとリネームを...
-
メモリをアドレスを直接指定し...
-
「*:*」って何を意味するのでし...
-
実行中の変数の中身をイミディ...
-
1桁の日付に0を付ける
-
UWSC SLCTBOXもしくはSELECTに...
-
C++ APIについて エラーコード...
-
[python] 文字列を変数名として...
-
日付の差分の求め方(日、分)
-
Net::Telnetでタイムアウト時間...
-
UWSCのSELECT文の記述方法
-
メ-ルにno problem@の前にname...
-
VBAのNext forでエラーが出て困...
-
Perl:CGI.pm:入力ボックスのク...
-
エクセルマクロでフォルダのコ...
-
perl内のhtml文を、ループさせ...
-
VB6で、長い時間かかる処理...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
<SELECT>タグの折り返し
-
セレクトメニューで2つの項目...
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
複数列を持ったリストボックス...
-
同じものを繰り返し表示させる
-
セレクトボックスから別窓にジ...
-
セレクトボックスの「選択して...
-
セレクトボックスである項目を...
-
プルダウンメニューの幅
-
SELECT OPTIONの中身をコピペ...
-
プルダウンリストの背景色の指定
-
selectタグ内の特定のoptionの...
-
ドロップダウンリストのselecte...
-
【プルダウンで選んでGOボタン...
-
セレクトメニューで選んだ値を...
-
セレクトボックスの中を一部隠...
-
プルダウンメニューのターゲッ...
-
HTMLでメディアプレイヤーの再...
おすすめ情報