Получение значения поля ввода и добавление к DOM

Question

Я пытаюсь получить значение моего ввода, добавленного в DOM. Не уверен, почему я не получаю значение моего ввода. Я продолжаю получать [объект HTMLInputElement] ... любая помощь была бы оценена. Я пробовал пару методов, но все равно не получаю никаких результатов.

// 'use strict'; 
 

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

 
document.addEventListener('DOMContentLoaded', init); 
 

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

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

 
} 
 

 
function addField(){ 
 
\t var item = document.getElementById("addItems").value; 
 
\t var newField = document.createElement('li'); 
 
\t newField.appendChild(document.createTextNode(addItems)); 
 
\t newField.classList.add('singleLine'); 
 
\t list.appendChild(newField); 
 
\t console.log("working"); 
 
}

<div class="wrapper"> 
 
\t <div class="list"> 
 
\t \t <h2>List: </h2> 
 
\t \t <section class="top"> 
 

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

Вот bin

Answer 1

Использование addItems вместо item в document.createTextNode

addItems является id элемента, следовательно, JS парсера будет добавлен элемент <input type="text" value="input" id="addItems">.

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>

Примечание: Избегайте связывания inline-events (У вас есть addEventListener, а также inline-click-event), поэтому он будет вызывать функцию дважды ..