Clever Geek Handbook

Switch div background color between 2 colors to alternate clicks

I have a div with the id "box". its original background color is set to #ff7700

. I want to create a function "function1 ()" to do the following:

  • first click: change background color to #ff0077

  • Second click: change the background color to #ff7700

  • third click: change the background color to #ff0077

  • fourth click: change background color to #ff7700

    etc.

code:

<style>
    #box{
    background-color: #ff7700;
    cursor: pointer;
}    
</style>

<div id="box" onClick="function1()" > Inner HTML</div>

I tried to write a function, but it doesn't work.

<script>
    function function1(){
        var check = document.getElementById("box").style;
        check2=check.backgroundColor;
        if (check2 != "#ff0077"){
            check2="#ff7700";
            } else {
               check2="#ff0077";
            }
       }
</script>

please advise any other approach. I want to stick with core JS instead of using JQuery.

+3


source to share


6 answers


Better to use boolean like toggle:



var div = document.getElementById("box"),
    toggle = false;
    
div.onclick = function() {
  toggle = !toggle;                                     // invert toggle
  div.style.background = toggle? "#ff0077": "#ff7700";  // change background color depending on the value of toggle
}

div.style.background = "#ff7700";                       // give the div an initial background
      

        
        
        
      

    
<div id="box">Inner HTML</div>
Run codeHide result


+3


source


I made a simple example using jQuery. Hope I helped.

Basically I get an element with class ".myDiv" and add a click event to it. Always an element clicked on the "toggleClass ()" method to switch the class.



$(document).ready(function(){
  $(".myDiv").bind("click", function(){
    $(this).toggleClass("myClass");
  });
});
      

        
        
        
      

    
.myDiv{
  padding: 1em;
  font-family: "Helvetica", sans-serif;
  line-height: 1.5em;
  background: #cccccc;
}

.myClass{
  background: red;
  color: white;
}
      

        
        
        
      

    
<div class="myDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda facere, cumque aliquam quis aut, velit quidem, repellendus quo maiores saepe unde sed reprehenderit laborum? Eum laborum possimus quidem, ea non.</p>
</div>

<!--jQuery Libary-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Run codeHide result


+2


source


  • Remove background-color: #ff7700;

    from css selector#box

  • Create 2 css classes say A

    and B

    and put background colors there.
  • Get the dom element var domEl = document.getElementById("box");

    After that, if domEl.className==="A"

    , then assign it "B"

    otherwise assign"A"

+1


source


.style

the property does not return the hexadecimal color code. You can use window.getComputedStyle()

to get a computed property CSS

, set color to valuergb() 

<style>
  #box {
    background-color: #ff7700;
    cursor: pointer;
  }
</style>
<script>
  function function1() {
    if ( window.getComputedStyle(box).backgroundColor === "rgb(255, 119, 0)") {
      box.style.backgroundColor = "rgb(255, 0, 119)";
    } else {
      box.style.backgroundColor = "rgb(255, 119, 0)";
    }
  }
  onload = function() {
    const box = document.getElementById("box");
  }
</script>
<div id="box" onClick="function1()"> Inner HTML</div>
Run codeHide result


See also Is it possible to change the background color and go back to original in plain javascript every time I click a button?

+1


source


You will get the color of your element using getComputedStyle () which will return your color to the format rgb()

. If you need to change rgb()

to hex

find out more on this post .

Here's an example

function function1(){
    var check = document.getElementById("box");
    var color = window.getComputedStyle(check, null).getPropertyValue('background-color');  
    if (color != "rgb(255, 119, 0)"){
      check.style.backgroundColor = "rgb(255, 119, 0)";
    } else {
      check.style.backgroundColor = "rgb(255, 255, 255)";
    }
}
      

        
        
        
      

    
#box{
    background-color: #ff7700;
    cursor: pointer;
}    
      

        
        
        
      

    
<div id="box" onclick="function1()">Inner HTML</div>
Run codeHide result


+1


source


Using inline js code, I would suggest passing the variable this : current element. This way you don't need to select an item.

Using window.getComputedStyle and converting the value to the hex value of your code:

function function1(ele) {
    var background = window.getComputedStyle(ele).backgroundColor;
    var hexColor = rgb2hex(background);
    if (hexColor != "#ff0077") {
        ele.style.backgroundColor = "#ff0077";
    } else {
        ele.style.backgroundColor = "#ff7700";
    }
}



function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
    ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
}
      

        
        
        
      

    
#box {
    background-color: #ff7700;
    cursor: pointer;
}
      

        
        
        
      

    
<div id="box" onClick="function1(this)"> Inner HTML</div>
Run codeHide result


+1


source






More articles:


All Articles