CODEWITHSUNDEEP
javascriptdom
Lucky500
Lucky500

Reputation: 507

Getting value of input field and append to DOM

I am trying to get the value of my input appended to the DOM. Not sure why I am not getting the value of my input box. I keep getting [object HTMLInputElement]... any help would be appreciate it. I tried couple of methods, but still not getting any results.

// 'use strict';

var button;
var list = document.getElementById("greatList");
//var item = document.getElementById("addItems").value;
//console.log(item);

document.addEventListener('DOMContentLoaded', init);

function init(){
	 button = document.getElementById('addButton');
	

	document.querySelector('#addButton').addEventListener('click', addField);
	//button.addEventListener('click', getItem)

}

function addField(){
	var item = document.getElementById("addItems").value;
	var newField = document.createElement('li');
	newField.appendChild(document.createTextNode(addItems));
	newField.classList.add('singleLine');
	list.appendChild(newField);
	console.log("working");
}
<div class="wrapper">
	<div class="list">
		<h2>List: </h2>
		<section class="top">

			<input type="text" value="input" id="addItems">
			<button type="submit" id="addButton" onclick="addField()">Add</button>
			<button>Get Random</button>
		</section>
		<hr>
		<section class="result">
			<ul id="greatList">
				<li class="singleLine">Hello</li>
			</ul>
		</section>
	</div>
</div>

Here is a bin

Upvotes: 0

Views: 779

Answers (1)

Rayon
Rayon

Reputation: 36609

Use addItems instead of item in document.createTextNode

addItems is id of the element hence JS parser will append <input type="text" value="input" id="addItems"> element.

element IDs are global variables

var list = document.getElementById("greatList");
document.addEventListener('DOMContentLoaded', init);

function init() {
  document.querySelector('#addButton').addEventListener('click', addField);
}

function addField() {
  console.log(addItems);
  var item = document.getElementById("addItems").value;
  var newField = document.createElement('li');
  newField.appendChild(document.createTextNode(item));
  newField.classList.add('singleLine');
  list.appendChild(newField);
}
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<div class="wrapper">
  <div class="list">
    <h2>List: </h2>
    <section class="top">

      <input type="text" value="input" id="addItems">
      <button type="submit" id="addButton">Add</button>
      <button>Get Random</button>
    </section>
    <hr>
    <section class="result">
      <ul id="greatList">
        <li class="singleLine">Hello</li>
      </ul>
    </section>
  </div>
</div>

Note: Avoid binding inline-events(You have addEventListener as well as inline-click-event) so it will invoke function twice..

Upvotes: 1

Related Questions