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

George · Accepted Answer · 2013-10-29 18:56:46Z

10

Close your option tags.
Use document.getElementById('bgcolor').value
Don't forget to put break in each case or you will end up with green div everytime.
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.

edited Oct 29, 2013 at 18:56

George

36.8k9 gold badges70 silver badges109 bronze badges

answered Oct 29, 2013 at 18:44

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

George Over a year ago

I took the liberty of copying your amended code into your post. JSFiddles are nice but please include the code in your answer as well.

Artyom Neustroev Over a year ago

@oGeez yeah, I agree, should've included it myself. Thank you

TheGreenOmega Over a year ago

@ArtyomNeustroev Use cyan instead of cian.

MJSalinas · Accepted Answer · 2013-10-29 18:47:53Z

0

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

answered Oct 29, 2013 at 18:47

MJSalinas

1391 silver badge9 bronze badges

Comments

gasp · Accepted Answer · 2013-10-29 18:50:08Z

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

Roshan Ahirwar · Accepted Answer · 2014-06-11 08:41:13Z

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>

answered Jun 11, 2014 at 8:41

Roshan Ahirwar

1

1 Comment

Victor Over a year ago

Your answer only contains code. You should actually explain what your code does to provide the OP with a good answer!

Collectives™ on Stack Overflow

Change div color with javascript

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related