Question

 <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的背景颜色，但它没有检测到所选值，正如我在parragraph上打印时看到的那样。我已经在多个页面中看到了这个程序，它对我来说看起来是一样的，但它实际上对我的代码不起作用。你能看到任何错误吗？谢谢！

Answer 1

关闭option代码。
使用document.getElementById('bgcolor').value
不要忘记在每个break中添加case，否则每次都会以绿色div结束。
为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;
    }
}

这个working fiddle总结了它。

Answer 2

此外，在每一个或最后一个将是您将看到的开关案例之后需要一个break语句，在本例中为green。 http://www.w3schools.com/js/js_switch.asp

Answer 3

<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>

Answer 4

<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>

用javascript更改div颜色

4 个答案: