How do I get JS to print out the strings within an array whilst being in bullet points on separate lines?

Question

We were given code in computer science which we were supposed to look at and explain and then we're supposed to add to it.

This is the code:

<!DOCTYPE html>
<html>
<head>
<title>Example Website</title>
</head>
<body>
<p id="demo"></p>

<script>

var array = ["example1","example2","example3"];

document.getElementById("demo").innerHTML = array[0]

</script>

</body>
</html>

What he wanted us to do now was make it print the array in separate lines with bullet points instead of just printing the first thing within the array which is 'example1'.

He said to use any resources you can from the internet to find out how and to try and remember the information found and then explain it during class.

Praveen Kumar Purushothaman · Accepted Answer · 2016-06-07 18:35:27Z

9

Well, you can use .join(), <ul> and <li>s. The .join() helps in converting the array into a string joined by the parameter given in the .join().

<p id="demo"></p>
<script>
  var array = ["example1","example2","example3"];
  document.getElementById("demo").innerHTML = '<ul><li>' + array.join("</li><li>"); + '</li></ul>';
</script>

The above displays like:

answered Jun 7, 2016 at 18:35

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

3 Comments

BlizzardGizzard Over a year ago

If I used this code and added more things to my array, would I have to add to the 4th line of code so that it also arranges that part of the code into a bullet point or would I not need to change that?

Praveen Kumar Purushothaman Over a year ago

@BlizzardGizzard It automatically does it based on the number of items in the array. You don't need to do anything.

Praveen Kumar Purushothaman Over a year ago

@BlizzardGizzard += is appending the contents. a += b is same as a = a + b.

J Delaney · Accepted Answer · 2016-06-07 18:37:43Z

3

A bullet point list in HTML looks like this:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

So to print something like that you'll want to follow these steps:

Print out the opening <ul> tag
Loop through the array and print each array element surrounded by <li> tags
Print out the closing </ul> tag

var array = ['example1', 'example2', 'example3'];

var s = '<ul>';

for (var i = 0; i < array.length; i++) {
  s += '<li>' + array[i] + '</li>';
}

s += '</ul>'

document.getElementById("demo").innerHTML = s;

<div id="demo"></div>

edited Jun 7, 2016 at 18:37

answered Jun 7, 2016 at 18:35

J Delaney

5894 silver badges17 bronze badges

4 Comments

Praveen Kumar Purushothaman Over a year ago

The question was asked to make the JavaScript code. :)

J Delaney Over a year ago

@PraveenKumar I know! I updated my example to include the JS on how to do it. I wanted to make sure to explain the high-level overview as well.

BlizzardGizzard Over a year ago

Could you possibly explain the '+=' expression you used? When googling this I don't see any result.

Praveen Kumar Purushothaman Over a year ago

@BlizzardGizzard += is appending the contents. a += b is same as a = a + b.

Collectives™ on Stack Overflow

How do I get JS to print out the strings within an array whilst being in bullet points on separate lines?

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related