Trying to make a simple to do list.

I'm wanting to know how to append the results from the resultsStored variable into the empty items div so it appends each time you enter an item into the text input.

Cheers!

HTML :

<input id="result" type="text" name="" placeholder="Enter item">
<button id="add-item" type="button" name="button">Add</button>
<div id="items">

</div>

JS :

var button = document.getElementById('add-item');
var result = document.getElementById('result');

document.querySelector('button').addEventListener("click", function() {
  // Store results
  var resultStored = result.value;
  // Reset value of input
  result.value = "";

  // Get items container
  var items = document.getElementById('items');
  // Add items to container
});

Trying to make a simple to do list.

I'm wanting to know how to append the results from the resultsStored variable into the empty items div so it appends each time you enter an item into the text input.

Cheers!

HTML :

<input id="result" type="text" name="" placeholder="Enter item">
<button id="add-item" type="button" name="button">Add</button>
<div id="items">

</div>

JS :

var button = document.getElementById('add-item');
var result = document.getElementById('result');

document.querySelector('button').addEventListener("click", function() {
  // Store results
  var resultStored = result.value;
  // Reset value of input
  result.value = "";

  // Get items container
  var items = document.getElementById('items');
  // Add items to container
});

• javascript

• Just read the appendChild API :) – GillesC Commented Dec 14, 2016 at 17:19
• help.dottoro./ljvnuman.php – PM 77-1 Commented Dec 14, 2016 at 17:21

3 Answers 3

You could use the innerHTML property :

items.innerHTML += resultStored;

Hope this helps.

var button = document.getElementById('add-item');
var result = document.getElementById('result');

document.querySelector('button').addEventListener("click", function() {
  // Store results
  var resultStored = result.value;
  // Reset value of input
  result.value = "";

  // Get items container
  var items = document.getElementById('items');
  // Add items to container
  items.innerHTML += resultStored;
});

<input id="result" type="text" name="" placeholder="Enter item">
<button id="add-item" type="button" name="button">Add</button>
<div id="items">

</div>

Wrapping new entry in p example :

var button = document.getElementById('add-item');
var result = document.getElementById('result');

document.querySelector('button').addEventListener("click", function() {
  // Store results
  var resultStored = result.value;
  // Reset value of input
  result.value = "";

  // Get items container
  var items = document.getElementById('items');
  // Add items to container
  items.innerHTML += "<p>" + resultStored + "</p>";
});

<input id="result" type="text" name="" placeholder="Enter item">
<button id="add-item" type="button" name="button">Add</button>
<div id="items">

</div>

var button = document.getElementById('add-item');
var result = document.getElementById('result');

document.querySelector('button').addEventListener("click", function() {
  // Store results
  var resultStored = result.value;
  // Reset value of input
  result.value = "";

  // Get items container
  var items = document.getElementById('items');
  // Add items to container
  items.innerHTML+='</br>'+resultStored;
  result.focus();
});

<input id="result" type="text" name="" placeholder="Enter item">
<button id="add-item" type="button" name="button">Add</button>
<div id="items">

</div>

I would first create an array for the todo items. Then you can loop over this array adding each one to the page. That way later on you will be able to edit a particular item very easily.

``` var button = document.getElementById('add-item'); var result = document.getElementById('result'); var items = []; var itemsContainer = document.getElementById('items');

document.querySelector('button').addEventListener("click", function() {
    // add item to array
    items.push(result.value);

    // Reset value of input
    result.value = "";

    // reset items container
    itemsContainer.innerHTML = '';

    // Add items to container
    for (var i = 0; i < items.length; i++) {
        itemsContainer.innerHTML += "<br />" + items[i];
    };
});

```