以下代码块不起作用。

与其创建带有来自输入的文本的列表元素,不如创建一个文本并将其附加而不创建列表元素。

有人可以看到我的错误在哪里吗?



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>

最佳答案

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>

关于javascript - appendChild + createElement不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58531155/

10-12 12:49
查看更多