获取输入字段的值并附加到 DOM

Getting value of input field and append to DOM

本文关键字：DOM 输入 字段 获取      更新时间：2023-09-26

我正在尝试将我的输入值附加到 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(){
	 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>

这是一个垃圾箱

在document.createTextNode中使用addItems而不是item

addItems是元素的id，因此JS解析器将附加<input type="text" value="input" id="addItems">元素。

元素 ID 是全局变量 

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），因此它将调用函数两次。

相关文章：