Javascript While Looping Through Array And Outputting in .innerhtml

Question

I'm brand new to Javascript and teaching myself. I'm trying to setup a function that will write each of the elements of the array AmericanCars with a space between the elements.

I have it working so that when I use .innerHTML=AmericanCars[Index Position] plus a non-breaking space, I can write one element of the array. Now I'm trying to loop through it with a while loop, but I just get an output of "undefined."

How can I get .innerHTML to write out each of the elements of an array with a space between them? Is there a method that is simpler than using the While loop or is my While loop just formatted wrong.

<html>
    <head>
    </head>
    <body>

        <script language="javascript" type="text/javascript">
        var AmericanCars=["Chevy", "Ford", "Dodge"];
        var JapaneseCars=["Honda", "Toyota", "Subaru"];
        var FavoriteCars=[];

        function ListAmericanCars() {

        var arraycounter = 0; 

        /* Use array counter to set the value that is displayed in innerHTML's square [] brackets */
            while (arraycounter <= AmericanCars.length) {

                document.getElementById('content').innerHTML = AmericanCars[arraycounter] + "&nbsp ";
                arraycounter++;
            }
        }
        </script>

        <p> What Are Your Favorite American Cars?  Answer: 
            <span id="content">______________
            </span>
        </p>

        <button onclick="ListAmericanCars()">
            American Cars Function
        </button>
    </body>
</html>

very beautifully written post, well done!

benomatis
– benomatis

2014-04-01 04:41:08 +00:00
Commented Apr 1, 2014 at 4:41 — benomatis
– benomatis, Commented Apr 1, 2014 at 4:41

Jessica Brown · Accepted Answer · 2014-04-01 04:52:38Z

3

Arrays are 0-based. Change it to less than or else the last element will print undefined.

while (arraycounter < AmericanCars.length) {
    ...
}

Additionally, you could just do:

document.getElementById('content').innerHTML = AmericanCars.join('&nbsp');

edited Apr 1, 2014 at 4:52

Jessica Brown

8,3328 gold badges50 silver badges86 bronze badges

answered Apr 1, 2014 at 4:42

codedigger

1543 bronze badges

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

2 Comments

benomatis Over a year ago

nicely explained! only one tiny thing missing: edit the last line so it appears as code (add 4 spaces)... ;)

user3483571 Over a year ago

.join was perfect and the simplest. Also, I didn't need the nbsp. I just put the space in as .join(" ").

Adrian Preuss · Accepted Answer · 2014-04-01 04:29:22Z

1

It's a bad idea. While you putting Data with innerHTML, the browser rendering it.

A better solution is to create an variable and append the data:^

var AmericanCars=["Chevy", "Ford", "Dodge"];
var JapaneseCars=["Honda", "Toyota", "Subaru"];
var FavoriteCars=[];

function ListAmericanCars()  {
    var arraycounter = 0; /* Use array counter to set the value that is displayed in innerHTML's square [] brackets */
    var myContent = '';

    while (arraycounter < AmericanCars.length) {
        myContent += AmericanCars[arraycounter] + "&nbsp ";
        arraycounter++;
    }

    document.getElementById('content').innerHTML = myContent;
}

EDIT: Ah forgotten. Dont use <= in your while loop. Thats not an valid index.

answered Apr 1, 2014 at 4:29

Adrian Preuss

3,1232 gold badges28 silver badges46 bronze badges

7 Comments

user3483571 Over a year ago

Thanks. What should I use for less than or equal to instead of <=

benomatis Over a year ago

@AdrianPreuss You're not really explaining stuff, just plain say don't do this or that... Why is innerHTML bad...? Why use < rather than <=...? I think @codedigger explains it the best

benomatis Over a year ago

@AdrianPreuss Yes, dude, I can read, but can you read your own answer...? You write It's a bad idea. While you putting Data with innerHTML, the browser rendering it. - this is no explanation, sorry, also makes no sense at all...

benomatis Over a year ago

@AdrianPreuss Additionally, Dont use <= in your while loop. Thats not an valid index. - again, this doesn't make sense, plus isn't true either: 1. <= is not an index, but an operator, and 2. it is valid! have a read here

benomatis Over a year ago

@AdrianPreuss You should explain that in your answer, not in a comment, especially considering the asker is a beginner. They shouldn't just follow your lead because you say so, but should understand why...

|

row1 · Accepted Answer · 2014-04-01 04:40:14Z

1

I think a for loop would more standard in this situation, also build up your content and then assign it to innerHTML. Array indexes start at 0 and not 1, so you should use < and not <=', else you will be off by one at the end of your loop.

function ListAmericanCars() {
    var content = '';
    for (var i = 0; i < AmericanCars.length; i++) {
        content += AmericanCars[i] + "&nbsp ";
    }
    document.getElementById('content').innerHTML = content;
}

answered Apr 1, 2014 at 4:40

row1

5,5883 gold badges48 silver badges74 bronze badges

3 Comments

Adrian Preuss Over a year ago

irrelevant. It does not matter, for which method you choose.

benomatis Over a year ago

@AdrianPreuss agreed 100%

row1 Over a year ago

I voted up your post because I agree, but I thought it was worth showing that a for loop is more commonly used when looping over arrays.

Collectives™ on Stack Overflow

Javascript While Looping Through Array And Outputting in .innerhtml

3 Answers 3

2 Comments

7 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related