Select OptionとIf文を併用して背景色を変更する

ユーザーがドロップダウンリストで選択した内容に基づいて背景色を変更したい。私は例としてifを試しましたが、うまくいきません。Select OptionとIf文を併用して背景色を変更する

<body> 
    <B><font size = 4>Choose Your Favourite Team</font></B> 
    <select id="item1" team="item1"> 
     <option>-Choose Team-</option> 
     <option value="1">Cleveland Cavaliers</option> 
     <option value="2">Boston Celtics</option> 
     <option value="3">Washington Wizards</option> 
     <option value="4">Toronto Raptors</option> 
     <option value="5">Atlanta Hawks</option> 
     <option value="6">Indiana Pacers</option> 
     <option value="7">Detroit Pistons</option> 
     <option value="8">Chicago Bulls</option> 
     <option value="9">Miami Heat</option> 
     <option value="10">Milwaukee Bucks</option> 
     <option value="11">Charlotte Hornets</option> 
     <option value= "12">New York Knicks</option> 
     <option value="13">Philadelphia 76ers</option> 
     <option value="14">Orlando Magic</option> 
     <option value="15">Brooklyn Nets</option> 
     <option value="16">Golden State Warriors</option> 
     <option value="17">San Antonio Spurs</option> 
     <option value="18">Houston Rockets</option> 
     <option value="19">Utah Jazz</option> 
     <option value="20">Los Angeles Clippers</option> 
     <option value="21">Memphis Grizzlies</option> 
     <option value="22">Oklahoma City Thunder</option> 
     <option value="23">Denver Nuggets</option> 
     <option value="24">Portland TrailBlazers</option> 
     <option value="25">Dallas Mavericks</option> 
     <option value="26">Minnesota Timberwolves</option> 
     <option value="27">Sacramento Kings</option> 
     <option value="28">New Orleans Pelicans</option> 
     <option value="29">Phoenix Suns</option> 
     <option value="30">Los Angeles Lakers</option> 
    </select> 
    <button onclick="message()">Go!</button> 

    <script language = javascript> 
     function message() { 
     var s = document.getElementbyId('item1').value; 
     var item1 = s.options[selectedIndex].value 
     if (item1 == "1") { 
      document.background = #922B21 
     } 
     } 
    </script>

出典

2017-03-07 Fez

いくつかの問題があり、この

<script language = javascript> 
     function message() { 
      var s = document.getElementById('item1').value; 
      if (s == "1") { 
       document.body.style.background = "#922B21"; 
      } 
     } 
    </script>

出典

2017-03-07 19:02:38

をお試しください：

あなたが宣言していないか、初期化しないselectedIndexと呼ばれる変数を使用しようとしているが。
document.getElementbyIdは存在しません。それはdocument.getElementById、資本金Bが必要です。
あなたはそれが要素そのものであるかのように（s.optionssは、要素の値であるとき）select要素の値を使用しようとしています。
Document interfaceにはバックグラウンドプロパティがないため、document.backgroundに割り当てても何も行われません。 document.body.style.backgroundColorは、body要素の背景色を設定します。
#922B21はJavaScriptコードで単独では構文エラーです。

... item1が"1"ではない場合は、色を元に戻したいと思うかもしれません。

別に、あなたは現在選択されている値を取得するために

var s = document.getElementById('item1'); 
var item1 = s.options[s.selectedIndex].value;

を使用し、あなたもちょうどs.valueを使用することができますことができますが：だから

var s = document.getElementById('item1'); 
var item1 = s.value;

：

function message() { 
 
    var s = document.getElementById('item1'); 
 
    var item1 = s.value; 
 
    if (item1 == "1") { 
 
    document.body.style.backgroundColor = "#922B21"; 
 
    } else { 
 
    document.body.style.backgroundColor = ""; 
 
    } 
 
}

<B><font size = 4>Choose Your Favourite Team</font></B> 
 
<select id="item1" team="item1"> 
 
     <option>-Choose Team-</option> 
 
     <option value="1">Cleveland Cavaliers</option> 
 
     <option value="2">Boston Celtics</option> 
 
     <option value="3">Washington Wizards</option> 
 
     <option value="4">Toronto Raptors</option> 
 
     <option value="5">Atlanta Hawks</option> 
 
     <option value="6">Indiana Pacers</option> 
 
     <option value="7">Detroit Pistons</option> 
 
     <option value="8">Chicago Bulls</option> 
 
     <option value="9">Miami Heat</option> 
 
     <option value="10">Milwaukee Bucks</option> 
 
     <option value="11">Charlotte Hornets</option> 
 
     <option value= "12">New York Knicks</option> 
 
     <option value="13">Philadelphia 76ers</option> 
 
     <option value="14">Orlando Magic</option> 
 
     <option value="15">Brooklyn Nets</option> 
 
     <option value="16">Golden State Warriors</option> 
 
     <option value="17">San Antonio Spurs</option> 
 
     <option value="18">Houston Rockets</option> 
 
     <option value="19">Utah Jazz</option> 
 
     <option value="20">Los Angeles Clippers</option> 
 
     <option value="21">Memphis Grizzlies</option> 
 
     <option value="22">Oklahoma City Thunder</option> 
 
     <option value="23">Denver Nuggets</option> 
 
     <option value="24">Portland TrailBlazers</option> 
 
     <option value="25">Dallas Mavericks</option> 
 
     <option value="26">Minnesota Timberwolves</option> 
 
     <option value="27">Sacramento Kings</option> 
 
     <option value="28">New Orleans Pelicans</option> 
 
     <option value="29">Phoenix Suns</option> 
 
     <option value="30">Los Angeles Lakers</option> 
 
    </select> 
 
<button onclick="message()">Go!</button>

出典

2017-03-07 19:06:24

Select OptionとIf文を併用して背景色を変更する

答えて

関連する問題