HTML Javascript about array.

Question

I am still new to JavaScript. I need to create a button in html and allow the user to click the button to change the specify body background color.

var colors = ["purple", "yellow", "black"];

Above is the given array in the JavaScript. If the user click more than 3 times (after blue color), the green color will be selected again.

<form>
<p><input type="button" value="Change Color" name="B1" onclick="changeColor()"></p>
</form>

I roughly write the function for the button, but i did not know how i can assign the color from the array to the background color

function changeColor()
{   
    document.body.style.backgroundColor="colors[i]";
    i++
    if(i >=2)
    {
     i = 0;
    }
}

Hope someone can correct my code.

I'm guessing there's a var i = 0; somewhere outside changeColor. Next just use document.body.style.backgroundColor = colors[i];. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Aug 12, 2015 at 7:24

Beri · Accepted Answer · 2015-08-12 07:27:12Z

6

First you need to define global i variable, that will keep your current index. Than check if it's value extends array length, if so, than you should reset it, to the array start.

var colors = ["purple", "yellow", "black"];
var i = 0; // define global i variable
function changeColor()
{   
    document.body.style.backgroundColor = colors[i++];
    if(i >= colors.length)
    {
        i = 0;
    }
}

answered Aug 12, 2015 at 7:27

Beri

11.6k4 gold badges38 silver badges59 bronze badges

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

Comments

Laxmikant Dange · Accepted Answer · 2015-08-12 07:27:56Z

3

Little bit mistake in your logic,

Here is what you want.

var colors = ["purple", "yellow", "black"];
var i = 0;

function changeColor() {
  document.body.style.backgroundColor = colors[i];
  if (i >= 2) {
    i = 0;
    return;//Return without incresing it when it becomes 0 again.
  }
  i++;//Move increment to bottom of page.
}

<form>
  <p>
    <input type="button" value="Change Color" name="B1" onclick="changeColor()">
  </p>
</form>

answered Aug 12, 2015 at 7:27

Laxmikant Dange

7,7386 gold badges43 silver badges67 bronze badges

2 Comments

Beri Over a year ago

Replace if (i >= 2) with array.length, hardcoding max iterator value is dangerous:)

Laxmikant Dange Over a year ago

@Beri ,You are right, Answer is just related to questions logic for better understanding to Firion Redfield.

codebox · Accepted Answer · 2015-08-12 07:31:10Z

3

This is probably the 'best' way to do it, although the code is more difficult to understand than the other answers:

var changeColor = (function(){
    var colors = ["purple", "yellow", "black"], i=0;    
    return function(){
        document.body.style.backgroundColor = colors[i++ % colors.length];
    };
}());

By declaring the i and colors variables inside an anonymous function you avoid creating global variables, and prevent any other code from accessing these values.

By using the % remainder operator with colors.length you can add/remove colors from the array without changing any other part of your code.

answered Aug 12, 2015 at 7:31

codebox

20.3k10 gold badges70 silver badges81 bronze badges

1 Comment

codecodeNinja Over a year ago

I understand that :), never thought to use modulo for the array size.

ralh · Accepted Answer · 2015-08-12 07:35:06Z

3

The simplest implementation:

var colors = ["purple", "yellow", "black"];
var i = 0;
function changeColor()
{   
    document.body.style.backgroundColor = colors[i];
    ++i;
    if(i >= colors.length)
    {
        i = 0;
    }
}

edited Aug 12, 2015 at 7:35

answered Aug 12, 2015 at 7:24

ralh

2,5941 gold badge16 silver badges19 bronze badges

Comments

Barmar · Accepted Answer · 2015-08-12 07:24:59Z

2

Don't put the array reference in quotes. Variables are not expanded inside quotes. So just assign the array reference to the style:

document.body.style.backgroundColor = colors[i];

answered Aug 12, 2015 at 7:24

Barmar

789k57 gold badges554 silver badges669 bronze badges

1 Comment

codecodeNinja Over a year ago

Thx :) it helpful for me

Collectives™ on Stack Overflow

HTML Javascript about array.

5 Answers 5

Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related