0

下記のソースコードは、bgsoundをプルダウンボタンで設定したもので、
それぞれのoptionをクリックすると、ボタンの色が切り替わります。
しかし、非推奨のonclickで設定しているため、これをonchangeに
変えたいのですが、うまくいきません。どのようにすれば、いいでしょうか。
ご教示ください。
なお、音は出ないように設定しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<TITLE>optionに応じて、ボタンの色を変える- JavaScript</TITLE> 

<STYLE type="text/css"> 
<!--
.butt{
background:lightskyblue;color:black;
}
//-->
</STYLE>

<script type="text/javascript">
<!--
function bgm1(){
bgm.src = "";
document.getElementById("bgms").style.background="silver";
}
function bgm2(){
bgm.src = "111.mid";
document.getElementById("bgms").style.background="lightskyblue";
}
function bgm3(){
bgm.src = "222.wav";
document.getElementById("bgms").style.background="pink";
}
//-->
</script>

<bgsound id="bgm" src="" loop="-1">
</HEAD> 

<body>

<SELECT id="bgms" class="butt">
<OPTION style="background:silver" onclick="bgm1()" selected>選曲(停止)</OPTION>
<OPTION style="background:lightskyblue" onclick="bgm2()">111</OPTION>
<OPTION style="background:pink" onclick="bgm3()">222</OPTION>
</SELECT>

</BODY>
</HTML>

3 件の回答 3

1

回答を参考にしたら、別の回答が見つかりました。

(javascriptの部分)

   function selectBgm(e){
    var selectedIndex = e.selectedIndex;
        document.getElementById("bgCol").style.background=e[selectedIndex ].style.backgroundColor;
}
 //-->
</script>

(body内)

   <body>
     <form id="bgms" style="text-align:right">
       <SELECT id="bgCol" onchange="bgm.src=this.value; selectBgm(this)">
         <OPTION style="background-color:silver" value="" >選曲(停止)</OPTION>
         <OPTION style="background-color:lightskyblue" value="111.mid"  selected>111</OPTION>
        <OPTION style="background-color:pink" value="222.wav">222</OPTION>
       </SELECT>
     </form>
 </BODY>
0

documentonload()でイベントハンドラを登録した方が良いと思うのですが、onchange()を使うのであれば、select要素にonchange()を書いて、どの要素が選択されたかをthisで渡せば実現できます。

selectselectedIndexから、選択されたoptionの背景色を取得してボタン色にしています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=shift_jis">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <TITLE>optionに応じて、ボタンの色を変える- JavaScript</TITLE>
    <STYLE type="text/css"> 
<!--
.butt{
    background:silver;
    color:black;
}
//-->
</STYLE>
    <script type="text/javascript">
<!--
function selectBgm(e){
    var selectedIndex = e.selectedIndex;
    document.getElementById("bgms").style.background=e[selectedIndex ].style.backgroundColor;
    bgm.src = undefined;
    if(selectedIndex  === 1) {
        bgm.src = "111.mid";   
    } else if(selectedIndex  === 2) {
        bgm.src = "222.wav";
    }
console.log(bgm.src);
}
//-->
</script>
    <bgsound id="bgm" src="" loop="-1">
  </HEAD>
  <body>
    <SELECT id="bgms" class="butt" onchange="selectBgm(this)">
      <OPTION style="background:silver" selected>選曲(停止)</OPTION>
      <OPTION style="background:lightskyblue">111</OPTION>
      <OPTION style="background:pink">222</OPTION>
    </SELECT>
  </BODY>
</HTML>

3
  • 回答ありがとうございました。 理屈が通っていて、コンピューターも受け付けるのでしょうね。 ”function selectBgm(e){”の部分の()の中は、"e"を入れるのですか。 それと、”bgm.src = undefined;"の部分のundefinedは、””でもいいのですよね。 optionタグに、"value"を入れなく組み立てられるとは、驚きました。 使わせていただきます。
    – user9359
    Commented 2015年11月16日 13:56
  • eは仮引数ですので、他の文字を使っても問題ないです。bgm.srcの初期値は空文字でも大丈夫です。最初はvalueを使ったのですが、インラインでスタイル指定しているならstyleオブジェクトから取れるなーと思ったのでこの手にしました(CSSで指定されたstyleを取り出すにはもう一工夫いります)。
    – quesera2
    Commented 2015年11月16日 14:20
  • まだ、他にも方法があるのですか。 selectでイベントを発生させるには,"onclick"が一番簡潔で組み立てられそうですが、非推奨ですからね。
    – user9359
    Commented 2015年11月16日 14:33
0

何か一括処理したい場合、上記のコードではsrcとoptionのボタンの色を同じscript内に入れた方がやり易くなると思いますので、さらに改良して見ました。

(javascript内)

function selectBgm(e){
    var selectedIndex = e.selectedIndex;
        document.getElementById("bgCol").style.background=e[selectedIndex ].style.backgroundColor;
        bgm.src= e[selectedIndex ].value;    
}
//-->
</script>

(body内)

selectタグ内の
onchange="bgm.src=this.value; selectBgm(this)"を、
onchange="selectBgm(this)"に変更する。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。