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] + "  ";
arraycounter++;
}
}
</script>
<p> What Are Your Favorite American Cars? Answer:
<span id="content">______________
</span>
</p>
<button onclick="ListAmericanCars()">
American Cars Function
</button>
</body>
</html>
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] + "  ";
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 Commented Apr 1, 2014 at 4:41
3 Answers
Reset to default 3Arrays 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(' ');
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] + "  ";
arraycounter++;
}
document.getElementById('content').innerHTML = myContent;
}
EDIT: Ah forgotten. Dont use <= in your while loop. Thats not an valid index.
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] + "  ";
}
document.getElementById('content').innerHTML = content;
}