Display javascript array in div

Question

I am trying to make a basic to do application.

Here is what I have done so far;

When the user clicks a button a prompt appears asking the user to enter a task.
The task will then be stored in an array
I have displayed the array in the console. However, I am having trouble displaying the array on the web page:

var toDoItems = [];
var parsed = "";

document.getElementById("addItem").onclick = function() {
  var userInput = prompt("Enter your Todo: ")
  toDoItems.push = userInput;
  console.log(toDoItems);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>To Do List</title>
</head>

<body>
  <h1>My Tasks</h1>
  <button id="addItem">Add item</button>
  <div id="item-list">
  </div>
  <script src="js/script.js"></script>
</body>

</html>

You can display the array list like this : $('#item-list').html(toDoItems.toString()); This will give you comma seperated values of that array — Kishan
– Kishan, Commented Aug 9, 2018 at 12:24
Loop over the array. Inside the loop, create a html element from the todo item. Insert the created html into the page. — Shilly
– Shilly, Commented Aug 9, 2018 at 12:24
$() will only work if he's actually using JQuery, which this question isn't tagged as. — Shilly
– Shilly, Commented Aug 9, 2018 at 12:24
Just as a side note: Array.push() is a function so you have to write it like this: toDoItems.push(userInput); — Fabian N.
– Fabian N., Commented Aug 9, 2018 at 12:30

Fabian N. · Accepted Answer · 2018-08-09 12:32:55Z

5

The first thing is you need to use Array.push() and not Array.push = someVal. Then you can loop over to the values and create a list of elements in the HTML:

var toDoItems = [];
var parsed = "";

document.getElementById("addItem").onclick = function() {
  var nHTML = '';
  var userInput = prompt("Enter your Todo: ")

  toDoItems.push(userInput);
  toDoItems.forEach(function(item) {
    nHTML += '<li>' + item + '</li>';
  });

  document.getElementById("item-list").innerHTML = '<ul>' + nHTML + '</ul>'
}

<head>
  <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>To Do List</title>
</head>

<body>
  <h1>My Tasks</h1>
  <button id="addItem">Add item</button>
  <div id="item-list">
  </div>
  <script src="js/script.js"></script>
</body>

edited Aug 9, 2018 at 12:32

Fabian N.

3,8682 gold badges27 silver badges47 bronze badges

answered Aug 9, 2018 at 12:27

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

3 Comments

Fabian N. Over a year ago

+1 for an easy to read answer. Also in case you didn't know: Code-Snippets have an inbuild autoformat button: i.sstatic.net/pI5af.png

Ankit Agarwal Over a year ago

@FabianN. you are correct. I did not know that :). Thanks

Fabian N. Over a year ago

It took more than a week of reviewing edit suggestions and first posts until I started suspecting that people in general (not just new users) just don't know about the button or better, they don't recognize it as the auto format code-button... So I made a picture of it... But you are the first one who confirmed my suspicion =)

Duncan McArdle · Accepted Answer · 2020-10-20 15:11:44Z

3

You can use map() to map over the toDoItems and convert each items to html code and then use join() to combine the array into one string of HTML code.

Like this:

const HTML = toDoItems.map( item => `<li>${item}</li> ` ).join('');
document.getElementById("item-list").innerHTML = '<ul>' + HTML + '</ul>'

Edit: Fixed typo (should be join, not joint)

edited Oct 20, 2020 at 15:11

Duncan McArdle

5211 gold badge5 silver badges15 bronze badges

answered Aug 9, 2018 at 14:46

Ethan Vu

2,9971 gold badge12 silver badges26 bronze badges

Comments

dislick · Accepted Answer · 2018-08-09 12:26:31Z

1

Loop over toDoItems, create a <p> tag and append it to #item-list:

toDoItems.forEach((item) => {
    let p = document.createElement('p');
    p.innerText = item;
    document.querySelector('#item-list').appendChild(p); 
});

answered Aug 9, 2018 at 12:26

dislick

6771 gold badge7 silver badges25 bronze badges

Comments

Madhan Varadhodiyil · Accepted Answer · 2018-08-09 12:29:20Z

1

You can use innerHTML for this

document.getElementById("item-list").innerHTML += "<p>" +userInput+"</p>";

demo : plunker

answered Aug 9, 2018 at 12:29

Madhan Varadhodiyil

2,1061 gold badge16 silver badges21 bronze badges

Comments

Kavya Hanumantharaju · Accepted Answer · 2018-08-09 12:40:31Z

Check below I think this may help you
I removed style from your code for my convenience

<html>
    <head>
        <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <title>To Do List</title>
        <script>
        function myFunction(){
        var toDoItems = [];
         var parsed ="";
        var userInput = prompt("Enter your Todo: ")
        toDoItems.push = userInput;
        document.getElementById("item-list").innerHTML=userInput;
        console.log(toDoItems);
    }
        </script>
    </head>
    <body>
        <h1>My Tasks</h1>
        <button id="addItem" onclick="myFunction()">Add item</button>
        <div id="item-list">
        </div>
    </body>
    </html>

tran-ha Vu · Accepted Answer · 2022-11-24 16:29:57Z

-1

The Code above has an drawback: It erases the old value of userInput when you enter a new value in prompt(). I propose: document.getElementById("item-list").innerHTML +=userInput+"
"; Vu

answered Nov 24, 2022 at 16:29

tran-ha Vu

1

3 Comments

tran-ha Vu Over a year ago

It's me: += userInput+"<br />"; (the last line)

Eric Aya Over a year ago

Hello, please see meta.stackoverflow.com/editing-help Thanks!

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Display javascript array in div

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related