show javascript array values

Question

i'm new in JavaScript.

I have an array with some values and I'd like to show each array values within a list.

This is my script

<script>
var fruits = "apple,banana,watermelon,coconut";
var plits = fruits.split(',');
function a(){
  for(i=0; i<plits.length; i++){
    document.getElementById('output').innerHTML = "<li>" + plits[i] + " fruit</li>";
    //document.write("<li>" + plits[i] + " fruit</li>");
  }
}
</script>

<button onclick="a()">show fruits</button>
<div id='output'></div>

Whenever i run the code, it only shows the latest value of the array.

Likewise when i use the commented script above, the page changed and it turns infinity loading.

How can i show the array values within the #output?

UL should be the parent of li elements. Also you have to concatenate the innerHTML like document.getElementById('output').innerHTML += "<div>" + plits[i] + " fruit</div>"; — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Apr 4, 2016 at 12:12

Nina Scholz · Accepted Answer · 2016-04-04 12:25:30Z

3

Better use document.createElement and Node.appendChild for it.

function a() {
    var ul = document.createElement('ul'),
        li, i;

    for (i = 0; i < plits.length; i++) {
        li = document.createElement('li');
        li.innerHTML = plits[i];
        ul.appendChild(li);
    }
    document.getElementById('output').appendChild(ul);
    a = function () {};
}

var fruits = "apple,banana,watermelon,coconut",
    plits = fruits.split(',');

<button onclick="a()">show fruits</button>
<div id='output'></div>

edited Apr 4, 2016 at 12:25

answered Apr 4, 2016 at 12:20

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

4 Comments

Arif Zoel Over a year ago

Thanks, it helps !

Rayon Over a year ago

#Impressed with your otherwise thinking ;)

Nina Scholz Over a year ago

@RayonDabre, what do you mean?

Rayon Over a year ago

I have been reading your answers every now and then and I always find it different from others :)

gurvinder372 · Accepted Answer · 2016-04-04 12:20:58Z

1

replace

document.getElementById('output').innerHTML = "<li>" + plits[i] + " fruit</li>";

with

document.getElementById('output').innerHTML += "<li>" + plits[i] + " fruit</li>";

Complete function

function a(){
  var html = "<ul>";
  for(i=0; i<plits.length; i++)
  {
    html += "<li>" + plits[i] + " fruit</li>";
  }
  html += "</ul>";
  document.getElementById('output').innerHTML = html;
}

For ensuring that a() is not invokable again, set it to null

function a(){
  var html = "<ul>";
  for(i=0; i<plits.length; i++)
  {
    html += "<li>" + plits[i] + " fruit</li>";
  }
  html += "</ul>";
  document.getElementById('output').innerHTML = html;
  a = null;// or a = function(){}
}

edited Apr 4, 2016 at 12:20

answered Apr 4, 2016 at 12:13

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

8 Comments

Rajaprabhu Aravindasamy Over a year ago

@Rayon Also li cannot be a child of div

gurvinder372 Over a year ago

@RajaprabhuAravindasamy fixed it

gurvinder372 Over a year ago

@RayonDabre true, took me more time than I thought ;)

Arif Zoel Over a year ago

thanks, it works! But, can you tell me how to make the function only works for 1 time?

Rajaprabhu Aravindasamy Over a year ago

@ArifZoel IIFE is the thing that you must be looking for.

|

Sushant Yadav · Accepted Answer · 2016-04-04 12:20:27Z

0

What you are doing is replacing the innerHTML of the div in for loop.. But what you really needs to do is to append string in every itteration.

<script>
var fruits = "apple,banana,watermelon,coconut";
var plits = fruits.split(',');
function a(){
  var message = "<ul>";
  for(i=0; i<plits.length; i++){
     message += '<li>'+plits[i] + " fruit</li>";
  }
  message += '</ul>'
  document.getElementById('output').innerHTML = message;
}
</script>

<button onclick="a()">show fruits</button>
<div id='output'></div>

answered Apr 4, 2016 at 12:20

Sushant Yadav

7261 gold badge14 silver badges28 bronze badges

Comments

a45b · Accepted Answer · 2016-04-04 12:21:30Z

0

            <!DOCTYPE html>
            <html>
            <head>
                <title></title>
            </head>
            <body>
            <script>
            var fruits = "apple,banana,watermelon,coconut";
            var plits = fruits.split(',');
            var content = '';
            function a(){
              for(i=0; i<plits.length; i++){
                content = content.concat("<li>" + plits[i] + " fruit</li>");  
              }
              document.getElementById('output').innerHTML = content;
            }
            </script>

            <button onclick="a()">show fruits</button>
            <div id='output'></div>
            </body>
            </html>

answered Apr 4, 2016 at 12:21

a45b

5195 silver badges19 bronze badges

Comments

Happy Koala · Accepted Answer · 2016-04-04 12:31:07Z

Check out this fiddle:

https://jsfiddle.net/0my1xx7c/

<button id='button'>show fruits</button>
<ul id='output'></ul>


<script>
var fruits = "apple,banana,watermelon,coconut";
var plits = fruits.split(',');
function a(){
  for(i=0; i<plits.length; i++){
    var li = document.createElement('li');
    li.textContent = plits[i] + ' ' + 'fruit';
    document.getElementById('output').appendChild(li);
  }
}

document.getElementById('button').addEventListener('click', a, false);
</script>

Remarks:

Don't append li items to a div, but a ul or ol element
Instead of writing , add an id to the element and attach an event listener to it that executes the function after the button has been clicked
Create and append elements instead of using innerHTML

Collectives™ on Stack Overflow

show javascript array values

This is my script

5 Answers 5

4 Comments

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

This is my script

5 Answers 5

4 Comments

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related