javascript make background color change every time you click

Question

So i'm making this button which changes background-color when you click it, but when you click it again the color goes back to default(the color it was before you first clicked). this is my HTML:

<span onclick="Switch(this)" class="button" id="button1">button</span>

and my javascript:

<script type="text/javascript">
        function Switch(obj) {
            var div = document.getElementById(obj);
            if(div.style.backgroundColor === "#6DFC93"){
                div.style.backgroundColor = "#27D956";
            }else{
                div.style.backgroundColor = "#6DFC93";
            }

        }
    </script>

Any suggestions?

Possible duplicate of [How do I change the background color with JavaScript?](http://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript) — peinearydevelopment, Dec 10 '15 at 17:31
@void I suspect he is trying to figure out how to do it in the first place — AGE, Dec 10 '15 at 17:32
@peinearydevelopment it is not a duplicate because you must before check the current value of the background and only after you can set it. The problem is how get the current background color and transform it to hexadecimal. — gaetanoM, Dec 10 '15 at 17:59

score 2 · Answer 1 · answered Dec 10 '15 at 17:46

What you can do is make an array of colors and use math.random to randomly pick a color from that array every time you click the button. its loads of fun to button mash the button!

Hope this helps

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643'];
                
function clickMe(){
  var randomize = Math.floor(Math.random()*myColors.length);
  $('.box').css("background-color", myColors[randomize]);
}

.THEbtn{
  border: 1px solid #323643;
  border-radius: 50px;
 }

.box{
  margin-top: 10px;
  height: 300px;
  width: 100%;
  border: 1px solid black;
  border-radius: 5px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='THEbtn' onclick='clickMe()'>Click Me</button>

<div class='box'></div>

score 1 · Answer 2 · edited May 23 '17 at 12:30

1

Referring to How to get hex color value rather than RGB value?, and considering that the parameter passed to the Switch function is already the current object, my solution is (the value obj.style.backgroundColor is in rgb format):

var hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");

function rgb2hex(rgb) {
  if (rgb.trim().length == 0) {
    return "";
  }
  var savedValue = rgb;
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  if (rgb == null) {
    return savedValue;  // if not RGB format
  }
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}


function Switch(obj) {
  if(rgb2hex(obj.style.backgroundColor) == "#6DFC93"){
    obj.style.backgroundColor = "#27D956";
  }else{
    obj.style.backgroundColor = "#6DFC93";
  }
}

<span onclick="Switch(this)" class="button" id="button1">button</span>

edited May 23 '17 at 12:30

Community

1
1

answered Dec 10 '15 at 17:55

gaetanoM

41,594
6
42
61

consider using `.toString(16)` – royhowie Dec 10 '15 at 18:47
How is this even remotely related to the question? It has nothing to do with hex/rgb conversion. – Matt Styles Dec 10 '15 at 21:44
@MattStyles this question is related to the rgb because on my computer when I set the color with '#6....' when after i read it like obj.style.backgroundColor I get a string like rgb(...). You can try and check by yourself. I used only js, no jQuery. Let me know. Have you executed my snippet? – gaetanoM Dec 10 '15 at 21:47
@gaemaf Good point, I was thinking about setting the value rather than getting, I stand corrected, I'm not sure what I was thinking about! It is still a crazy way to do what the user wants but it is in-keeping with their approach. I've upvoted your answer as it does solve the question. – Matt Styles Dec 10 '15 at 21:53
@MattStyles we are a community and sometimes english is a problem. I apologize for this, but be sure I check before write on my computer. It's a way to improve my knowledge. Thanks so much – gaetanoM Dec 10 '15 at 21:56
@gaemaf No, your English is good! It was me just being wrong. Apologies should be my end. – Matt Styles Dec 10 '15 at 22:00

score 0 · Answer 3 · answered Dec 10 '15 at 17:34

you already have an object why do getElementById?

function Switch(obj) {
            if(obj.style.backgroundColor === "#6DFC93"){
                obj.style.backgroundColor = "#27D956";
            }else{
                obj.style.backgroundColor = "#6DFC93";
            }

        }

score 0 · Answer 4 · answered Dec 10 '15 at 17:45

0

If you want to change the color just after first clicking, then this should work fine.

function Switch(obj) { obj.style.backgroundColor = "#27D956"; }

answered Dec 10 '15 at 17:45

Tadeáš Jílek

2,813
2
19
32

score 0 · Answer 5 · answered Dec 10 '15 at 17:49

A slightly different route, which is applicable if you also have access to the CSS, is to simply toggle a class which changes the colour

element.classList.toggle( 'button--isSwitched' )

Note that classList isnt supported absolutely everywhere but there are polyfills available.

.button {
  background-color: blue;
}

.button--isSwitched {
  background-color: red;
}

javascript make background color change every time you click

5 Answers5