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

Hi! I'm trying to change the background color of a div with js but it doesnt detect good the selected value, as i see when printing it on the parragraph. I've seen in multiple pages the procedure and it looks the same for me, but it actually does not work on my code. Can you see any mistakes? Thanks!!

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

Hi! I'm trying to change the background color of a div with js but it doesnt detect good the selected value, as i see when printing it on the parragraph. I've seen in multiple pages the procedure and it looks the same for me, but it actually does not work on my code. Can you see any mistakes? Thanks!!

• javascript
• html

4 Answers 4

1. Close your option tags.
2. Use document.getElementById('bgcolor').value
3. Don't forget to put break in each case or you will end up with green div everytime.
4. Use strings for your case conditions.

Amended 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;
    }
}

This working fiddle sums it up.

Also, the switch cases need a break statement after each one or the last one will be the one that you will see, in this case green. http://www.w3schools.com/js/js_switch.asp

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

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