CODEWITHSUNDEEP
javascripthtml
Alvaro Gomez
Alvaro Gomez

Reputation: 360

Change div color with javascript

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

Upvotes: 4

Views: 41970

Answers (4)

Roshan Ahirwar
Roshan Ahirwar

Reputation: 1

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

Upvotes: 0

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

  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.

Upvotes: 10

gasp
gasp

Reputation: 596

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

Upvotes: 0

MJSalinas
MJSalinas

Reputation: 139

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

Upvotes: 0

Related Questions