Следующий блок кода не работает.

Вместо создания элемента списка с текстом, поступающим из ввода, он просто создает текст и добавляет его, не создавая элемент списка.

Может кто-нибудь увидеть, в чем моя ошибка?

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>
0
ertemishakk 24 Окт 2019 в 00:21

1 ответ

Лучший ответ

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

  • .querySelectorAll() предназначен для получения более одного элемента.
  • # означает 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>
2
Scott Marcus 25 Окт 2019 в 12:58