Question

appendChild + createElement 不起作用

2019-10-23

209

javascript

以下代码块不起作用。

它不是使用来自输入的文本创建列表元素，而是仅创建文本并将其附加到其中，而不创建列表元素。

有人能看到我的错误在哪里吗？

var button = document.querySelector('#btn');
button.addEventListener('click', handleClick);

function handleClick(e) {
  e.preventDefault();
  var name=document.querySelectorAll('#item');
  for (let i=0; i<name.length; i++) {
    var x=name[i].value;
    var item= document.createElement('li')
    item.className="list-group-item";
    var text= document.createTextNode(x);
    var addList=item.appendChild(text);
    var ul=document.getElementById('items').appendChild(addList);
    console.log(document.getElementById('main').childNodes)
    name[i].value='';
  }

}

<div class="container">
       <div id="main" class="card card-body">
        <h2 class="title ">Create Contact
        </h2>
        <form id="addForm" class=" mb-3">
          <input type="text" class="form-control mr-2 my-3" id="item" placeholder="First Name" required>
          <input type="text" class="form-control mr-2 my-3" id="item" placeholder="Last Name" required>
          <h6 id='warning' style="display:none">All fields are required.</h6>
          <button id="btn" class="btn btn-dark">Create</button> 
        </form>
       
        <h2 class="title">Items</h2>
        <ul id="items" class="list-group">
          <li class="list-group-item">x</li>
          <li class="list-group-item" >y</li>
          <li class="list-group-item" >z</li>
          <li class="list-group-item" >g</li>
        </ul>
       </div>
      </div>

Answer 1

var name=document.querySelectorAll('#item');

.querySelectorAll() 用于获取多个元素。
# 表示 id 。
ID 在文档中必须是唯一的。
button 的默认类型是 submit ，您在这里不需要它。您需要的是常规的 button 。

请参阅下面内联的其他 HTML、CSS 和 JavaScript 注释：

// Get references to the elements you'll need just once:
let warning = document.getElementById("warning");
let fName = document.getElementById("fName");
let lName = document.getElementById('lName');
let list = document.getElementById("items");

// Set up event handler
document.getElementById("btn").addEventListener('click', handleClick);

function handleClick(){
    // Check to see if required fields have data
    if(fName.value == "" || lName.value == ""){
      warning.classList.remove("hidden");  // Invalid! Show message
      return;     // Exit function
    } else {
      warning.classList.add("hidden"); // Valid! Hide message
    }
    
    // There's only two elements to worry about and each has a unique id
    // so just do the work on each. A loop is overkill here.
    
    // First name
    var li= document.createElement('li')
    li.className="list-group-item";
    li.textContent = fName.value;  // No need for a text node. Just set the text content
    items.appendChild(li);
    fName.value = "";
    
    // Last Name
    li= document.createElement('li')
    li.className="list-group-item";
    li.textContent = lName.value;
    items.appendChild(li);   
    lName.value = "";
    
    //console.log(document.getElementById('main').innerHTML)
}

/* CSS does all the layout and styling  */
#warning { font-weight:bold; color:red; }
.hidden { display:none; }

<div class="container">
       <div id="main" class="card card-body">
        <h2 class="title ">Create Contact
        </h2>
        <form id="addForm" class=" mb-3">
          <input type="text" class="form-control mr-2 my-3" id="fName" placeholder="First Name" required>
          <input type="text" class="form-control mr-2 my-3" id="lName" placeholder="Last Name" required>
          
          <!-- You need a regular button here. Not the default type, which is a submit. -->
          <button type="button" id="btn" class="btn btn-dark">Create</button> 
          
          <!-- Heading elements (h1...h6) are to create sections of a document. You can't
               have section 6 unless you've already had sections 1 - 5. Don't use heading
               tags because of the way they make the text look. Style is CSS's job. -->
          <div id='warning' class="hidden">All fields are required.</div>          
        </form>

        <h2 class="title">Items</h2>
        <ul id="items" class="list-group">
          <li class="list-group-item">x</li>
          <li class="list-group-item" >y</li>
          <li class="list-group-item" >z</li>
          <li class="list-group-item" >g</li>
        </ul>
       </div>
      </div>