For loop and arrays

Question

I am practicing for course work and wanted to make a simple code to cycle through each string in an array. However, what actually happens is that it displays every string in the array over and over instead of replacing the one colour for another. How do I do this?

<!DOCTYPE html>
<html>
    <head>
        <title>Arrays</title>
        <script>
            colours = [" Purple"," Blue"," Pink"," Red"," Green"];
            function change() {
                for (i = 0; i < colours.length; i++) {
                    document.getElementById("hai").innerHTML += colours[i];
                }
            }
        </script>
    </head>

    <body>
        <p>The colour is: <span id=hai></span></p>
        <button id="btn" onclick="change()">Change!</button>
    </body>
    </html>

colours = [" Purple", " Blue", " Pink", " Red", " Green"];

function change() {
    for (i = 0; i < colours.length; i++) {
        document.getElementById("hai").innerHTML += colours[i];
    }
}

<p>The colour is: <span id=hai></span></p>
<button id="btn" onclick="change()">Change!</button>

Here's a hint. Use a variable that contains the index of what element in the array is currently displayed. In your change function, increment that pointer (remembering to make it go back to 0 at the end of the array) and display the corresponding array value. — Chris
– Chris, Commented Mar 23, 2016 at 9:50
Cycle through an array on click, Looping through array using a button — CodeCaster
– CodeCaster, Commented Mar 23, 2016 at 9:52
Possible duplicate of Continuously loop through JavaScript text array onclick — CodeCaster
– CodeCaster, Commented Mar 23, 2016 at 9:53

Thomas Shields · Accepted Answer · 2016-03-23 09:53:42Z

6

This is because you're appending the innerHTML of the node, rather than simply setting it, like so:

document.getElementById("hai").innerHTML = colours[i];

However, I suspect that's still not quite what you want - I'm guessing you want a new color after every click, in which case the code ought to look something like:

var colours = [" Purple"," Blue"," Pink"," Red"," Green"];
var currentColourIndex = 0;
function change() {
    document.getElementById("hai").innerHTML = colours[++currentColourIndex % colours.length];
}

Edit: JSFiddle example

edited Mar 23, 2016 at 9:53

answered Mar 23, 2016 at 9:52

Thomas Shields

8,9235 gold badges45 silver badges80 bronze badges

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

3 Comments

Chris Over a year ago

Neat trick with the modulus. I never would have thought of that.

Rush.2707 Over a year ago

Good use of fake accounts

Marcos Pérez Gude Over a year ago

Next time explain better what you need. I grow downvotes even answering your exactly question

Nina Scholz · Accepted Answer · 2016-03-23 09:54:07Z

3

You need an index, declared and initialized outside the change function:

var actualIndex = 0,
    colours = [" Purple", " Blue", " Pink", " Red", " Green"];

function change() {
    actualIndex++;                 // increment
    actualIndex %= colours.length; // correct the range
    document.getElementById("hai").innerHTML = colours[actualIndex];
}

<p>The colour is: <span id="hai"></span></p>
<button id="btn" onclick="change()">Change!</button>

answered Mar 23, 2016 at 9:54

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

2 Comments

Aesthete Over a year ago

This is exactly the same as Thomas' answer.

Nina Scholz Over a year ago

not really, i keep the index low, the other answer increments until it never goes.

squaleLis · Accepted Answer · 2016-03-23 09:56:39Z

2

In this case you do not need a for-loop: you want display just 1 color at time.

var colours = [" Purple", " Blue", " Pink", " Red", " Green"];
var currentIndex = 0;

function change() {
  if(currentIndex >= colours.length) currentIndex = 0;
  document.getElementById("hai").innerHTML = colours[currentIndex++];
}

<p>The colour is: <span id=hai></span></p>
<button id="btn" onclick="change()">Change!</button>

answered Mar 23, 2016 at 9:56

squaleLis

6,5242 gold badges25 silver badges32 bronze badges

Comments

Mohan Rao · Accepted Answer · 2016-03-23 10:12:16Z

0

For loop can't be used for your requirement. Use the below snippet.

    <script>
        colours = [" Purple"," Blue"," Pink"," Red"," Green"];
        var count=0;
        function change() {
        if(count==5){
            count=0;
        }
        document.getElementById("hai").innerHTML = colours[count];
        count++;
        }
    </script>

answered Mar 23, 2016 at 10:12

Mohan Rao

468 bronze badges

Collectives™ on Stack Overflow

For loop and arrays

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related