Question

每次我尝试提交我输入的文本时，我的控制台都会出现错误，我的javascript代码显示：

未捕获的TypeError：textItem.appendChild不是HTMLFormElement.addItem的函数

const form = document.getElementById('form');
const itemList = document.getElementById('item');

form.addEventListener('submit', addItem);

function addItem(e){
  e.preventDefault();
  var textItem = document.getElementById('text-item').value;

  var li = document.createElement('li');
  li.className = 'item-group';
  li.appendChild(document.createTextNode(textItem));
  textItem.appendChild(li);
}

body{
  font-family:arial;
  background: #f4f4f4;
}

#header{
  margin:20px 30px;
  background: #2cc36b;
  border-radius: 3px;
  padding:5px;
  text-align:center;
}

#header h1{
  background: #26A65B;
  color:#fff;
  font-size:40px;
  padding:5px;
  width:260px;
  margin:20px auto;
  box-shadow: 6px 6px 5px -2px rgba(0,0,0,0.5);
  border-radius: 2px;
}

#header input[type="text"]{
  width:400px;
  padding:10px;
  margin-bottom:15px;
  font-size: 15px;
  border: none;
  border-radius: 2px;
  background: #f4f4f4;
}

#main{
  margin:25px 100px 0 100px;
  border:2px solid #D2D7D3;
  border-radius:3px;
  padding:10px;
}

#main h3{
  margin:10px 10px -2px 30px;
  font-size:30px;
}

#main input[type="text"]{
  margin:10px 2px 8px 30px;
  padding:12px;
  width:150px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background:#f4f4f4;
  color:#111111;
  padding-right:30px;
}

#main input[type="submit"]{
  padding:10px;
  background:#BDC3C7;
  font-size:17px;
  border:none;
  border-radius: 5px;
  color:#001f3f;
}

#main input[type="submit"]:hover{
  cursor: pointer;
}

#main ul{
  list-style: none;
}

#main li{
  padding:15px;
  margin:0 25px 10px 0;
  border:1px solid #BDC3C7;
  border-radius:5px;
}

.delete-btn{
  float:right;
  color:#FF4136;
  font-size:17px;
}

.delete-btn:hover{
  cursor: pointer;
}

<html lang="en">
<head>
  <title> Item Lister </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
  <div id="header">
    <h1> Item Lister </h1>
    <input type="text" placeholder="Search through your items..." id="filterSearch"/>
  </div>
    <div id="main">
      <h3> Add items </h3>
    <form id="form">
      <input type="text" placeholder="Add an item..." id="text-item"/>
      <input type="submit" value="Submit" id="submit"/>
    </form>
      <h3> My items </h3>
      <ul id="item">
        <li class="item-group"> Example 1 <span class="delete-btn">&#x2718;</span> </li>
        <li class="item-group"> Example 2 <span class="delete-btn">&#x2718;</span></li>
      </ul>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

以下是codepen的链接 - https://codepen.io/anon/pen/bMdWgJ

我该如何解决这个问题？

Answer 1

textItem是一个字符串，它没有appendChild()方法，因此您收到错误

我认为您要将li追加到<UL>元素，因此使用

itemList.appendChild(li);

而不是

textItem.appendChild(li);

＆＃13;

const form = document.getElementById('form');
const itemList = document.getElementById('item');

form.addEventListener('submit', addItem);

function addItem(e){
  e.preventDefault();
  var textItem = document.getElementById('text-item').value;

  var li = document.createElement('li');
  li.className = 'item-group';
  li.appendChild(document.createTextNode(textItem));
  //textItem.appendChild(li);
  itemList.appendChild(li);
}

＆＃13;

body{
  font-family:arial;
  background: #f4f4f4;
}

#header{
  margin:20px 30px;
  background: #2cc36b;
  border-radius: 3px;
  padding:5px;
  text-align:center;
}

#header h1{
  background: #26A65B;
  color:#fff;
  font-size:40px;
  padding:5px;
  width:260px;
  margin:20px auto;
  box-shadow: 6px 6px 5px -2px rgba(0,0,0,0.5);
  border-radius: 2px;
}

#header input[type="text"]{
  width:400px;
  padding:10px;
  margin-bottom:15px;
  font-size: 15px;
  border: none;
  border-radius: 2px;
  background: #f4f4f4;
}

#main{
  margin:25px 100px 0 100px;
  border:2px solid #D2D7D3;
  border-radius:3px;
  padding:10px;
}

#main h3{
  margin:10px 10px -2px 30px;
  font-size:30px;
}

#main input[type="text"]{
  margin:10px 2px 8px 30px;
  padding:12px;
  width:150px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background:#f4f4f4;
  color:#111111;
  padding-right:30px;
}

#main input[type="submit"]{
  padding:10px;
  background:#BDC3C7;
  font-size:17px;
  border:none;
  border-radius: 5px;
  color:#001f3f;
}

#main input[type="submit"]:hover{
  cursor: pointer;
}

#main ul{
  list-style: none;
}

#main li{
  padding:15px;
  margin:0 25px 10px 0;
  border:1px solid #BDC3C7;
  border-radius:5px;
}

.delete-btn{
  float:right;
  color:#FF4136;
  font-size:17px;
}

.delete-btn:hover{
  cursor: pointer;
}

＆＃13;

<html lang="en">
<head>
  <title> Item Lister </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
  <div id="header">
    <h1> Item Lister </h1>
    <input type="text" placeholder="Search through your items..." id="filterSearch"/>
  </div>
    <div id="main">
      <h3> Add items </h3>
    <form id="form">
      <input type="text" placeholder="Add an item..." id="text-item"/>
      <input type="submit" value="Submit" id="submit"/>
    </form>
      <h3> My items </h3>
      <ul id="item">
        <li class="item-group"> Example 1 <span class="delete-btn">&#x2718;</span> </li>
        <li class="item-group"> Example 2 <span class="delete-btn">&#x2718;</span></li>
      </ul>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

＆＃13;

Answer 2

我认为你正在将孩子附加到错误的项目上。将您的项目附加到itemList

Code Snippet

 const form = document.getElementById('form');
 const itemList = document.getElementById('item');

form.addEventListener('submit', addItem);

function addItem(e){
  e.preventDefault();
  var textItem = document.getElementById('text-item').value;

  var li = document.createElement('li');
  li.className = 'item-group';
  li.appendChild(document.createTextNode(textItem));
  itemList.appendChild(li);
}

appendChild不是函数错误javascript

2 个答案: