18906


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

[code]

    <!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 = "１１１.mid";
    document.getElementById("bgms").style.background="lightskyblue";
    }
    function bgm3(){
    bgm.src = "２２２.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()">１１１</OPTION>
    <OPTION style="background:pink" onclick="bgm3()">２２２</OPTION>
    </SELECT>
    
    </BODY>
    </HTML>
    
[/code]


CC BY-SA 3.0
2015-11-16T12:47:13.893
18905
2015-11-17T14:14:09.200
9359
question
javascript
bgsoundをプルダウンで設定し、optionに応じてボタンの色を変える方法


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

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

[code]

    <!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 = "１１１.mid";   
        } else if(selectedIndex  === 2) {
            bgm.src = "２２２.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">１１１</OPTION>
          <OPTION style="background:pink">２２２</OPTION>
        </SELECT>
      </BODY>
    </HTML>
[/code]


CC BY-SA 3.0
2015-11-16T13:09:00.157
18906
2015-11-16T13:09:00.157
5337
18905
answer


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

(javascriptの部分)

[code]

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

(body内)

[code]

       <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="１１１.mid"  selected>１１１</OPTION>
            <OPTION style="background-color:pink" value="２２２.wav">２２２</OPTION>
           </SELECT>
         </form>
     </BODY>
    
[/code]


CC BY-SA 3.0
2015-11-17T12:47:49.053
18952
2015-11-17T12:47:49.053
9359
18905
answer


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

(javascript内)

[code]

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

(body内)

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


CC BY-SA 3.0
2015-11-17T14:14:09.200
18954
2015-11-17T14:14:09.200
9359
18905
answer