0

var joelsarray = [1 , 2 , "joel" , "carissa" , true];
 
for(i=0;i<joelsarray.length;i++) {
 
 document.getElementById("demo").innerHTML="The elements of my array are " + 
    joelsarray[i] + "</br>";
}
<button type="button" onclick="red()">Click Me!!</button>
     <h1>Hello</h1>
  <p id="demo">Hello World.Hello World.</p>

here is the code. It displays "the elements of my array are true" on the browser. when i use the document.write method it works..but the document.getElementByid doesn't work need help im a newbie thanks!

Liam
  • 27,717
  • 28
  • 128
  • 190
user9295496
  • 1
  • 3
    Your loop is overwriting the previous contents of the HTML element. So you'll only have the last contents. Simple solution: use `+=` instead of `=`. Although not most efficient. – trincot Feb 16 '18 at 16:59
  • Because you overwrite the innerHTML on every iteration of the loop. – takendarkk Feb 16 '18 at 16:59
  • It is because `innerHTML` REPLACES the contents of the element. You are only seeing the last item in the array – gforce301 Feb 16 '18 at 17:00

2 Answers2

0

You are looping over all the items in the array with a for loop:

for (var i = 0; i < joelsarray.length; i++) {

Everytime you loop, the variable i will be incremented: from 0 to 1 to 2..etc.

You can access the values in the array by index using the i from the iteration: joelsarray[i]. So joelsarray[2] would give you joel.

Before any looping has been done, you could assign the string using = to the element using:

document.getElementById("demo").innerHTML = "The elements of my array are <br>";

When the looping starts, you want to append using += the values to the string you already have added. If you would set the data during the looping using = , you would overwrite the data constantly after every loop.

You get this result "the elements of my array are true", because true is the last element in the array and would get written as last losing all the previous values.

You could add += to add the inner html

var joelsarray = [1, 2, "joel", "carissa", true];
document.getElementById("demo").innerHTML = "The elements of my array are <br>";
for (var i = 0; i < joelsarray.length; i++) {
  document.getElementById("demo").innerHTML += joelsarray[i] + "</br>";
}
<h1>Hello</h1>
<p id="demo">Hello World.Hello World.</p>
The fourth bird
  • 154,723
  • 16
  • 55
  • 70
  • Hey if you wouldn't mind , could you please elaborate a bit on what you just said...It literally went over my head.Thanks! – user9295496 Feb 16 '18 at 17:16
  • I mean why using the += sign help?? – user9295496 Feb 16 '18 at 17:24
  • @user9295496 I have added an explanation to my answer. If you use the equals sign `=` to assign data, which you will do in every loop. Resulting in overwriting the data in every time you loop. Using `+=`, you append the data. [This page](https://developer.mozilla.org/nl/docs/Web/JavaScript/Guide/Expressions_and_Operators) might help you. – The fourth bird Feb 16 '18 at 17:27
  • Thank you so much! I couldn't find the explanation before i could only see a code snippet...This has helped me so much..thanks a ton! – user9295496 Feb 16 '18 at 17:37
  • You are welcome! – The fourth bird Feb 16 '18 at 17:37
0

Use the function join to concatenate the string </br>

That for-loop is assigning the last value.

var joelsarray = [1, 2, "joel", "carissa", true];
document.getElementById("demo").innerHTML = "The elements of my array are <br>" + joelsarray.join('</br>');
<button type="button" onclick="red()">Click Me!!</button>
<h1>Hello</h1>
<p id="demo">Hello World.Hello World.</p>
Ele
  • 33,468
  • 7
  • 37
  • 75