Display array in div javascript

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"]. title = function[] {
  var userInput = prompt["Enter your Todo: "]
  toDoItems.push = userInput;
  console.log[toDoItems];
}

  
  
  
  To Do List



  
My Tasks
  Add item
  

  
  

Fabian N.

3,7292 gold badges21 silver badges45 bronze badges

asked Aug 9, 2018 at 12:20

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"]. title = function[] {
  var nHTML = '';
  var userInput = prompt["Enter your Todo: "]

  toDoItems.push[userInput];
  toDoItems.forEach[function[item] {
    nHTML += '
' + item + '
';
  }];

  document.getElementById["item-list"].innerHTML = '
' + nHTML + '
'
}

  
  
  
  To Do List



  
My Tasks
  Add item
  

  
  

Fabian N.

3,7292 gold badges21 silver badges45 bronze badges

answered Aug 9, 2018 at 12:27

Ankit AgarwalAnkit Agarwal

30k5 gold badges35 silver badges59 bronze badges

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 => `
${item}
 ` ].join[''];
document.getElementById["item-list"].innerHTML = '
' + HTML + '
'

Edit: Fixed typo [should be join, not joint]

answered Aug 9, 2018 at 14:46

Ethan VuEthan Vu

2,8069 silver badges24 bronze badges

Loop over toDoItems, create a

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

dislickdislick

6671 gold badge6 silver badges25 bronze badges

You can use innerHTML for this

document.getElementById["item-list"].innerHTML += "
" +userInput+"
";

demo : plunker

answered Aug 9, 2018 at 12:29

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

    
        
        
        To Do List
        
        function myFunction[]{
        var toDoItems = [];
         var parsed ="";
        var userInput = prompt["Enter your Todo: "]
        toDoItems.push = userInput;
        document.getElementById["item-list"].innerHTML=userInput;
        console.log[toDoItems];
    }
        
    
    
        
My Tasks
        Add item
        

        
    
    

answered Aug 9, 2018 at 12:40

How do you print an array in JavaScript?

 tag in your HTML page. And that's how you can print JavaScript array elements to the web page.

How do you display an array in HTML?

How do I print an array of objects in HTML?

 tag to display the output.

How do you display a list in JavaScript?