CODEWITHSUNDEEP
javascripthtmlcssarrays
Adeel Hussain
Adeel Hussain

Reputation: 53

Display javascript array in div

I am trying to make a basic to do application.

Here is what I have done so far;

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>

Upvotes: 1

Views: 17551

Answers (6)

tran-ha Vu
tran-ha Vu

Reputation: 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

Upvotes: -1

Ethan Vu
Ethan Vu

Reputation: 2987

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)

Upvotes: 3

Kavya Hanumantharaju
Kavya Hanumantharaju

Reputation: 118

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>

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30729

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>

Upvotes: 5

Madhan Varadhodiyil
Madhan Varadhodiyil

Reputation: 2116

You can use innerHTML for this

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

demo : plunker

Upvotes: 1

dislick
dislick

Reputation: 677

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); 
});

Upvotes: 1

Related Questions