3 
 <div id="change" style="height:20px; width:100%; position: absolute; float:bottom; background-color:#000000">
</div> <br>
                <select name="bgcolor" id="bgcolor" onchange="colorDiv()"> 
                    <option class="1" value=1> Grey
                    <option class="2" value=2> White 
                    <option class="3" value=3> Blue
                    <option class="4" value=4> Cian
                    <option class="5" value=5> Green
                </select> <br><br>

<p id="demo"></p>       




<script>
function colorDiv(){
      var selection = document.getElementById('bgcolor');  
      var div = document.getElementById( 'change' );         
            div.style.backgroundColor='green';

      document.getElementById("demo").innerHTML =selection; 

      switch (selection){
          case 1:
            div.style.backgroundColor='grey';
          case 2:
            div.style.backgroundColor='white';  
          case 3:
            div.style.backgroundColor='blue';
          case 4:
            div.style.backgroundColor='cian';
          case 5:
            div.style.backgroundColor='green';    
       }
</script>

你好！我正在尝试使用 js 更改 div 的背景颜色，但它没有检测到选定的值，正如我在段落上打印它时看到的那样。我已经在多个页面中看到了该过程，它对我来说看起来相同，但它实际上不适用于我的代码。你能看出有什么错误吗？谢谢！！

4

4 回答 4

8
  1. 关闭你的option标签。
  2. 利用document.getElementById('bgcolor').value
  3. 别忘了把break每个都放进去，case否则你每次都会变成绿色div。
  4. case根据您的条件使用字符串。

修改后的Javascript：

function colorDiv() {
    var selection = document.getElementById('bgcolor').value;
    var div = document.getElementById('change');
    div.style.backgroundColor = 'green';

    document.getElementById("demo").innerHTML = selection;

    switch (selection) {
        case "1":
            div.style.backgroundColor = 'grey';
            break;
        case "2":
            div.style.backgroundColor = 'white';
            break;
        case "3":
            div.style.backgroundColor = 'blue';
            break;
        case "4":
            div.style.backgroundColor = 'cian';
            break;
        case "5":
            div.style.backgroundColor = 'green';
            break;
    }
}

这个工作小提琴总结了它。

于 2013-10-29T18:44:45.550 回答
0

此外，switch 案例需要在每个案例之后都有一个 break 语句，否则最后一个将是您将看到的那个，在本例中为绿色。http://www.w3schools.com/js/js_switch.asp

于 2013-10-29T18:47:53.130 回答
0 
<div id="change" style="height:20px; background-color:#000000">
    change
</div>
<select name="bgcolor" id="bgcolor" onchange="colorDiv()"> 
    <option class="1" value="0"> Grey</option>
    <option class="2" value="1"> White </option>
    <option class="3" value="2"> Blue</option>
    <option class="4" value="3"> Cian</option>
    <option class="5" value="4"> Green</option>
</select>
<p id="demo"></p>       

<script>
function colorDiv(){
      var selection = document.getElementById('bgcolor').selectedIndex;
      var div = document.getElementById('change');
      div.style.backgroundColor='green';
      var colors = ["grey","white","blue","cian","green"];

      document.getElementById("demo").innerHTML = colors[selection]; 

      switch (selection){
          case 0:
            div.style.backgroundColor='grey';
            break;
          case 1:
            div.style.backgroundColor='white';  
            break;
          case 2:
            div.style.backgroundColor='blue';
            break;
          case 3:
            div.style.backgroundColor='cian';
            break;
          case 4:
            div.style.backgroundColor='green';
            break;
        default:
            div.style.backgroundColor='purple';
       }
   };
</script>
于 2013-10-29T18:50:08.170 回答
0 
<html>
<body>
<button onclick="myFunction()">Try it</button>
<div style="width:100px; height:100px; float:left;border:1px solid #000;" id="demo"></div>
<script>
function myFunction() {
    var latters = 'ABCDEF1234567890'.split("");
    var color = '#';
    for (var i=0; i < 6; i++)
    {
    color+=latters[Math.floor(Math.random() * 16)];

    } 

    document.getElementById("demo").style.background = color ;

}
</script>
</body>
</html>
于 2014-06-11T08:41:13.673 回答