输入值 - 未定义或未显示
Input Value - undefined or not showing up
我正在编写待办事项列表应用程序，但是 javascript 代码有一些错误。所以问题是当 Li 出现时它是 "undefined" 有时甚至是空白 space
HTML
<section>
<div class="list-app">
<ul id="list">
<li>Hell</li>
</ul>
<div class="bottom">
<input type="text" name="game" placeholder="Type Your List">
<img src="add.png" id="add">
<img src="trash.jpg" id="remove">
</div>
</div>
</section>
和javascript
var remove = document.querySelector('#remove');
var add = document.getElementById('add');
var textPlace = document.querySelector('input');
var listSingle = document.querySelector('LI');
var input = document.getElementsByName('game');
var items = [''];
add.addEventListener('click', function() {
items.push = [input.value];
document.getElementById('list').innerHTML = '<li>' + items + '</li>';
})
不要介意其他代码，它只是添加按钮的复制版本
items 变量是一个数组，您最初添加一个空字符串作为该数组中的第一项。
然后在您的 onclick 函数中引用该数组。引用是对数组对象本身（而不是数组中的项，或所有数组项的字符串）。
我认为您的目标是遍历数组中的每个项目并为每个数组项目创建 li 元素，即类似于：
document.getElementById('list').innerHTML = “”; // reset list
Items.forEach(function(item){
document.getElementById('list').innerHTML += '<li>' + item + '</li>';
})
在我的 phone atm 上，但当我回到办公桌前时会输入正确的代码段。
编辑
添加了一个显示此工作的片段。这更正了问题中的几个拼写错误。
var remove = document.querySelector('#remove');
var add = document.getElementById('add');
var textPlace = document.querySelector('input');
var listSingle = document.querySelector('li');
var input = document.getElementsByName('game');
var items = []; // this contained "". This made first item an empty string.
add.addEventListener('click', function() {
console.log("Clicked");
items.push(textPlace.value);
// .push is a method: use (param) rather than = [param]
// getElementsByName gets an array of elements. Can't get .value of multiple elements this way. QuerySelector gets single element, so input has been replaced with textPlace.
document.getElementById('list').innerHTML = ""; // reset list
items.forEach(function(item) {
document.getElementById('list').innerHTML += '<li>' + item + '</li>';
});
});
<section>
<div class="list-app">
<ul id="list">
<li>Hell</li>
</ul>
<div class="bottom">
<input type="text" name="game" placeholder="Type Your List">
<img src="add.png" id="add">
<img src="trash.jpg" id="remove">
</div>
</div>
</section>
我认为问题出在以下代码上。本returns合集NodeList(MDN Ref)
document.getElementsByName('game')
也就是说，如果你需要获取输入的值，你必须使用下面的代码
items.push(input[0].value);
但是，我认为这不是使用 getElementsByName 的好习惯，我更愿意使用 getElementById 并将 id 属性添加到 input 元素。
此外，如果您想将输入值列为单个列表项，请使用以下代码。
document.getElementById('list').innerHTML = items.map(item => '<li>' + item + '</li>');
希望对您有所帮助！
阅读我的评论。这就是我猜你真正想做的事情：
//<![CDATA[
/* js/external.js */
let get, post, doc, html, bod, nav, M, I, mobile, S, Q, aC, rC, tC; // for use on other loads
addEventListener('load', ()=>{
get = (url, success, context)=>{
const x = new XMLHttpRequest;
const c = context || x;
x.open('GET', url);
x.onload = ()=>{
if(success)success.call(c, JSON.parse(x.responseText));
}
x.send();
}
post = function(url, send, success, context){
const x = new XMLHttpRequest;
const c = context || x;
x.open('POST', url);
x.onload = ()=>{
if(success)success.call(c, JSON.parse(x.responseText));
}
if(typeof send === 'object' && send && !(send instanceof Array)){
if(send instanceof FormData){
x.send(send);
}
else{
const fd = new FormData;
for(let k in send){
fd.append(k, JSON.stringify(send[k]));
}
x.send(fd);
}
}
else{
throw new Error('send argument must be an Object');
}
return x;
}
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
var w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
var w = within || doc;
return w.querySelectorAll(selector);
}
aC = function(){
const a = [].slice.call(arguments), n = a.shift();
n.classList.add(...a);
return aC;
}
rC = function(){
const a = [].slice.call(arguments), n = a.shift();
n.classList.remove(...a);
return rC;
}
tC = function(){
const a = [].slice.call(arguments), n = a.shift();
n.classList.toggle(...a);
return tC;
}
// you can put all the below on a separate page in a load Event - besides the end load
const text_in = I('text_in'), list_add = I('list_add'), list = I('list');
function addText(){
let v = text_in.value.trim();
if(v !== ''){
const li = M('li'), div = M('div'), remove = M('input');
div.textContent = v; remove.type = 'button'; remove.value = 'remove'; aC(remove, 'remove');
remove.onclick = ()=>{
list.removeChild(li); text_in.focus();
}
li.appendChild(div); li.appendChild(remove); list.appendChild(li);
}
text_in.value = ''; text_in.focus();
}
list_add.onclick = addText;
text_in.onkeyup = e=>{
if(e.key === 'Enter')addText();
}
}); // end load
//]]>
/* css/external.css */
*{
padding:0; margin:0; font-size:0; border:0; box-sizing:border-box; outline:none; overflow:hidden; -webkit-tap-highlight-color:transparent;
}
html,body{
width:100%; height:100%; background:#ccc;
}
.main{
padding:10px;
}
input,#list_adder>ul>li{
font:bold 22px Tahoma, Geneva, sans-serif;
}
input[type=text]{
width:calc(100% - 75px); padding:3px 5px; border-radius:3px;
}
input[type=button]{
cursor:pointer; width:75px; background:linear-gradient(#1b7bbb,#147); color:#fff; padding:3px 0; border-radius:5px;
}
input[type=button].remove{
position:absolute; right:5px; top:5px; background:linear-gradient(#b75757,#502323); font-size:14px;
}
#list_adder>ul{
list-style:none;
}
#list_adder>ul>li{
position:relative; background:#eee; padding:3px 5px; border:1px solid #000; margin-top:7px; border-radius:2px;
}
#list_adder>ul>li>div{
display:inline-block; font-size:14px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<section id='list_adder'>
<input id='text_in' type='text' placeholder='Add Something Here' /><input id='list_add' type='button' value='ADD' />
<ul id='list'></ul>
</section>
</div>
</body>
</html>
我正在编写待办事项列表应用程序，但是 javascript 代码有一些错误。所以问题是当 Li 出现时它是 "undefined" 有时甚至是空白 space HTML
<section>
<div class="list-app">
<ul id="list">
<li>Hell</li>
</ul>
<div class="bottom">
<input type="text" name="game" placeholder="Type Your List">
<img src="add.png" id="add">
<img src="trash.jpg" id="remove">
</div>
</div>
</section>
和javascript
var remove = document.querySelector('#remove');
var add = document.getElementById('add');
var textPlace = document.querySelector('input');
var listSingle = document.querySelector('LI');
var input = document.getElementsByName('game');
var items = [''];
add.addEventListener('click', function() {
items.push = [input.value];
document.getElementById('list').innerHTML = '<li>' + items + '</li>';
})
不要介意其他代码，它只是添加按钮的复制版本
items 变量是一个数组，您最初添加一个空字符串作为该数组中的第一项。
然后在您的 onclick 函数中引用该数组。引用是对数组对象本身（而不是数组中的项，或所有数组项的字符串）。
我认为您的目标是遍历数组中的每个项目并为每个数组项目创建 li 元素，即类似于：
document.getElementById('list').innerHTML = “”; // reset list
Items.forEach(function(item){
document.getElementById('list').innerHTML += '<li>' + item + '</li>';
})
在我的 phone atm 上，但当我回到办公桌前时会输入正确的代码段。
编辑 添加了一个显示此工作的片段。这更正了问题中的几个拼写错误。
var remove = document.querySelector('#remove');
var add = document.getElementById('add');
var textPlace = document.querySelector('input');
var listSingle = document.querySelector('li');
var input = document.getElementsByName('game');
var items = []; // this contained "". This made first item an empty string.
add.addEventListener('click', function() {
console.log("Clicked");
items.push(textPlace.value);
// .push is a method: use (param) rather than = [param]
// getElementsByName gets an array of elements. Can't get .value of multiple elements this way. QuerySelector gets single element, so input has been replaced with textPlace.
document.getElementById('list').innerHTML = ""; // reset list
items.forEach(function(item) {
document.getElementById('list').innerHTML += '<li>' + item + '</li>';
});
});
<section>
<div class="list-app">
<ul id="list">
<li>Hell</li>
</ul>
<div class="bottom">
<input type="text" name="game" placeholder="Type Your List">
<img src="add.png" id="add">
<img src="trash.jpg" id="remove">
</div>
</div>
</section>
我认为问题出在以下代码上。本returns合集NodeList(MDN Ref)
document.getElementsByName('game')
也就是说，如果你需要获取输入的值，你必须使用下面的代码
items.push(input[0].value);
但是，我认为这不是使用 getElementsByName 的好习惯，我更愿意使用 getElementById 并将 id 属性添加到 input 元素。
此外，如果您想将输入值列为单个列表项，请使用以下代码。
document.getElementById('list').innerHTML = items.map(item => '<li>' + item + '</li>');
希望对您有所帮助！
阅读我的评论。这就是我猜你真正想做的事情：
//<![CDATA[
/* js/external.js */
let get, post, doc, html, bod, nav, M, I, mobile, S, Q, aC, rC, tC; // for use on other loads
addEventListener('load', ()=>{
get = (url, success, context)=>{
const x = new XMLHttpRequest;
const c = context || x;
x.open('GET', url);
x.onload = ()=>{
if(success)success.call(c, JSON.parse(x.responseText));
}
x.send();
}
post = function(url, send, success, context){
const x = new XMLHttpRequest;
const c = context || x;
x.open('POST', url);
x.onload = ()=>{
if(success)success.call(c, JSON.parse(x.responseText));
}
if(typeof send === 'object' && send && !(send instanceof Array)){
if(send instanceof FormData){
x.send(send);
}
else{
const fd = new FormData;
for(let k in send){
fd.append(k, JSON.stringify(send[k]));
}
x.send(fd);
}
}
else{
throw new Error('send argument must be an Object');
}
return x;
}
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
var w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
var w = within || doc;
return w.querySelectorAll(selector);
}
aC = function(){
const a = [].slice.call(arguments), n = a.shift();
n.classList.add(...a);
return aC;
}
rC = function(){
const a = [].slice.call(arguments), n = a.shift();
n.classList.remove(...a);
return rC;
}
tC = function(){
const a = [].slice.call(arguments), n = a.shift();
n.classList.toggle(...a);
return tC;
}
// you can put all the below on a separate page in a load Event - besides the end load
const text_in = I('text_in'), list_add = I('list_add'), list = I('list');
function addText(){
let v = text_in.value.trim();
if(v !== ''){
const li = M('li'), div = M('div'), remove = M('input');
div.textContent = v; remove.type = 'button'; remove.value = 'remove'; aC(remove, 'remove');
remove.onclick = ()=>{
list.removeChild(li); text_in.focus();
}
li.appendChild(div); li.appendChild(remove); list.appendChild(li);
}
text_in.value = ''; text_in.focus();
}
list_add.onclick = addText;
text_in.onkeyup = e=>{
if(e.key === 'Enter')addText();
}
}); // end load
//]]>
/* css/external.css */
*{
padding:0; margin:0; font-size:0; border:0; box-sizing:border-box; outline:none; overflow:hidden; -webkit-tap-highlight-color:transparent;
}
html,body{
width:100%; height:100%; background:#ccc;
}
.main{
padding:10px;
}
input,#list_adder>ul>li{
font:bold 22px Tahoma, Geneva, sans-serif;
}
input[type=text]{
width:calc(100% - 75px); padding:3px 5px; border-radius:3px;
}
input[type=button]{
cursor:pointer; width:75px; background:linear-gradient(#1b7bbb,#147); color:#fff; padding:3px 0; border-radius:5px;
}
input[type=button].remove{
position:absolute; right:5px; top:5px; background:linear-gradient(#b75757,#502323); font-size:14px;
}
#list_adder>ul{
list-style:none;
}
#list_adder>ul>li{
position:relative; background:#eee; padding:3px 5px; border:1px solid #000; margin-top:7px; border-radius:2px;
}
#list_adder>ul>li>div{
display:inline-block; font-size:14px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<section id='list_adder'>
<input id='text_in' type='text' placeholder='Add Something Here' /><input id='list_add' type='button' value='ADD' />
<ul id='list'></ul>
</section>
</div>
</body>
</html>