获取输入字段的值并附加到 DOM
Getting value of input field and append to DOM
我正在尝试将我的输入值附加到 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
),因此它将调用函数两次。
相关文章:
- 如何在dom元素中插入输入标记数据插件
- 向使用jQuery加载DOM后添加的字段添加不受限制的文本输入DatePickers
- 如何在呈现页面后使用 Java 脚本检测 dom 元素值的值是否有任何变化(例如,任何输入或复选框值更改)
- 聚合物 - 访问自定义元素内的 DOM 输入元素
- 在DOM中以img的形式插入文件输入
- 如何判断文本输入字段dom节点是否*没有*带有javascript的选择
- 如何使用JQuery检索完整的DOM结构,其中输入只是一个按钮
- 如何激活 bootstrap.tagsinput 用于 DOM 加载后添加的输入
- 不会提交通过 DOM 创建的<输入>值
- 如何在 DOM 中循环浏览输入范围滑块列表并使用每个循环捕获值
- 使用 jQuery 将输入元素添加到 DOM
- JS - 从表单中获取输入并将其放入数组中,然后将新行附加到表中(DOM)
- 输入字段对用户只读,但仍可通过 DOM 进行编辑
- 获取输入字段的值并附加到 DOM
- 检测新的 DOM 元素和对输入框的更改 - JQuery
- 设置 ID 输入 (DOM) 问题
- 如何使用 HTML 5 日期输入增加月份 - 将结果输出到 DOM
- 为什么html dom输入函数不工作
- React为虚拟DOM输入触发的onChange事件不同于常规DOM输入.这是为什么?
- 设置表单数据而不创建DOM输入