Append input value into element

Question

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

Just read the appendChild API :)

GillesC
– GillesC

2016-12-14 17:19:59 +00:00
Commented Dec 14, 2016 at 17:19 — GillesC
– GillesC, Commented Dec 14, 2016 at 17:19
help.dottoro.com/ljvnuman.php

PM 77-1
– PM 77-1

2016-12-14 17:21:34 +00:00
Commented Dec 14, 2016 at 17:21 — PM 77-1
– PM 77-1, Commented Dec 14, 2016 at 17:21

Zakaria Acharki · Accepted Answer · 2016-12-15 19:17:13Z

1

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>

edited Dec 15, 2016 at 19:17

answered Dec 14, 2016 at 17:20

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

3 Comments

DBS Over a year ago

Could also wrap the resultStored with some tags if desired for formatting items.innerHTML += "<p>" + resultStored + "</p>"

sid-m Over a year ago

just wanted to state that innerHTML is a property, not a method

Zakaria Acharki Over a year ago

@sid-m thanks for your intervention, i'm just noticing that i'm using the method word instead of property as you say... (updated).

LellisMoon · Accepted Answer · 2016-12-14 17:22:15Z

0

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>

answered Dec 14, 2016 at 17:22

LellisMoon

5,0282 gold badges14 silver badges25 bronze badges

Comments

Martin · Accepted Answer · 2016-12-14 17:27:02Z

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

```

Collectives™ on Stack Overflow

Append input value into element

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related