Question

我正在编码待办事项列表应用程序，但是javascript代码存在一些错误。所以问题是当李出现时，它是“未定义的”，有时甚至是空格 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>';


})

别介意其他代码，它只是添加按钮的对应版本

Answer 1

items变量是一个数组，您最初将一个空字符串添加为该数组中的第一项。

然后在onclick函数中引用该数组。引用是针对数组对象本身（而不是数组中的项目或所有数组项目的字符串）。

我想您的目标是遍历数组中的每个项目，并为每个数组项目创建li元素，即类似于以下内容的东西：

document.getElementById('list').innerHTML = “”; // reset list
Items.forEach(function(item){
    document.getElementById('list').innerHTML += '<li>' + item + '</li>';
})

在电话自动柜员机上，但是当我回到办公桌时会输入正确的代码段。

修改添加了显示此工作方式的代码段。这可以纠正问题中的一些错字。

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>

Answer 2

我认为问题在于以下代码。这将返回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>');

希望这会有所帮助！

Answer 3

阅读我的评论。这是我猜你真的想做的事情：

createStatement()

//<![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;
}

输入值-未定义或未显示

3 个答案: