CODEWITHSUNDEEP
javascript
Joe Consterdine
Joe Consterdine

Reputation: 1053

Append input value into element

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

Upvotes: 3

Views: 10173

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 1

Martin
Martin

Reputation: 1226

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

```

Upvotes: 0

LellisMoon
LellisMoon

Reputation: 5020

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>

Upvotes: 0

Related Questions