How to add variable color to span text

Question

I have a span with some text that changes every time the user clics a button. I need the color of it to change with every clic (I have the colors in an array like this: var colorArray = ["red","blue","red","red","green","blue","green","red"])

The array is not fixed as I read it from DB.

Any idea on how to do this via javascript (it's for a phonegap project)

http://stackoverflow.com/questions/5195303/set-css-attribute-in-javascript — A.O., Apr 03 '14 at 18:54

score 2 · Accepted Answer · answered Apr 03 '14 at 19:02

Every time you click on the button you can take the first element of your array and put it at the end of it, so it's a loop.

After with jQuery .css() function you can put the first color of the array to your span.

Code should look like this :

var colorArray = ["red","blue","green"];
$('button').click(function(){
    $('span').css({"color":colorArray[0]});
    colorArray.push(colorArray.shift());
});

See this Fiddle for more details

score 1 · Answer 2 · edited Jun 27 '14 at 14:49

1

You can use jQuery and the css() function. Please have a look at the documentation for this function at http://api.jquery.com/css/#css2 (there are also some examples in the end of the site). In the end you will have something like this:

$("span#id").css("color", target_color);

Instead of span#id you have to use the CSS selector for the target <span> element and target_color has to be the color of your array, you want to use.

edited Jun 27 '14 at 14:49

BenMorel

34,448
50
182
322

answered Apr 03 '14 at 18:55

Stephan Kulla

4,739
3
26
35

1

The code would be along these lines: `$('span').css("color", colorArray[i])` – Adam Apr 03 '14 at 18:55

score 1 · Answer 3 · answered Apr 03 '14 at 19:17

If you want pure js Here is the js code:

<script>
  var color = {
    currentColor: 0,
    colorArray: ["red","blue","red","red","green","blue","green","red","orange"],
    changeColor: function(){
      document.getElementById('span1').style.color = color.colorArray[color.currentColor];
      if (color.currentColor < color.colorArray.length-1){
        color.currentColor++;
      }else{
        color.currentColor = 0;
      }
    }
  };
</script>

Here ir your html:

<input type="button" value="change color" onclick="color.changeColor()">

<span id="span1"></span>

How to add variable color to span text

3 Answers3