Change div color with javascript

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>      

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

Answer 1

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.