Javascript While Looping Through Array And Outputting in .innerhtml

问题

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>

回答1:

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');

回答2:

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;
}

回答3:

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.

来源：https://stackoverflow.com/questions/22776754/javascript-while-looping-through-array-and-outputting-in-innerhtml

标签

javascript

html

while-loop