添加新联系人的功能不起作用

Question

我正在观看有关使用普通javascript编码的youtube视频，因为我目前正在学习javascript。我想为以字母a开头的名称添加一个“加法器”。

我编写了一个do1函数，并在以div开头的所有名称之间添加了a。我不知道这是怎么回事，主持人出了什么问题。我目前正在从javascript的基础知识过渡到中级水平，我正在尝试以任何可能的方式练习我的javascript技能。函数过滤器名称是由其他人编写的。我没有那么多的技能来做这样的事情。

因此，如果您对我应该如何练习js有任何想法。如果您有任何网站或什至可以帮助我学习JavaScript的任务。如果您在评论部分将我与任何人联系起来，将不胜感激。

let filterInput = document.getElementById('filterInput');

filterInput.addEventListener('keyup', filterNames);

function filterNames() {
  // Get value of input
  let filterValue = document.getElementById('filterInput').value.toUpperCase();

  // Get names ul
  let ul = document.getElementById('names');
  // Get lis from ul
  let li = ul.querySelectorAll('li.collection-item');

  // Loop through collection-item lis
  for (let i = 0; i < li.length; i++) {
    let a = li[i].getElementsByTagName('a')[0];
    // If matched
    if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
      li[i].style.display = '';
    } else {
      li[i].style.display = 'none';
    }
  }

}

function do1() {
  var input1 = document.getElementById('ipt1').value;
  var item = document.createTextNode(input1);
  var li = document.createElement('li').className = "collection-header";
  var a = document.createElement('a');
  var child1 = li.appendChild(a);
  var div = document.getElementById('div1');
  div1.appendChild(item).innerHTML = item;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
<div class="container">
  <h1 class="center-align">
    My Contacts
  </h1>
  <input type="text" id="filterInput" placeholder="Search names...">
  <ul id="names" class="collection with-header">
    <li class="collection-header">
      <h5>A</h5> <input type="box" id="ipt1"> <button onclick="do1();">`click me to add another contact`</button>
    </li>


    <div id="div1">
      <li class="collection-item">
        <a href="#">Abe</a>
      </li>
      <li class="collection-item">
        <a href="#">Adam</a>
      </li>
      <li class="collection-item">
        <a href="#">Alan</a>
      </li>
      <li class="collection-item">
        <a href="#">Anna</a>
      </li>
    </div>
    <li class="collection-header">
      <h5>B</h5> <input type="box" id="ipt2">
    </li>
    <li class="collection-item">
      <a href="#">Beth</a>
    </li>
    <li class="collection-item">
      <a href="#">Bill</a>
    </li>
    <li class="collection-item">
      <a href="#">Bob</a>
    </li>
    <li class="collection-item">
      <a href="#">Brad</a>
    </li>
    <li class="collection-header">
      <h5>C</h5> <input type="box" id="ipt3">
    </li>
    <li class="collection-item">
      <a href="#">Carrie</a>
    </li>
    <li class="collection-item">
      <a href="#">Cathy</a>
    </li>
    <li class="collection-item">
      <a href="#">Courtney</a>
    </li>
  </ul>
</div>

Answer 1

看下面的代码行：

var li = document.createElement('li').className = "collection-header"; 

此代码将字符串“ collection-header”分配给名为li的变量。字符串没有appendChild函数，因此您的代码在行上崩溃：

var child1 = li.appendChild(a);

不确定在同一行代码中使用两个=是什么意思。如果您可以进一步解释，也许有人可以帮助您实现所需的结果。

Answer 2

这是一个有效的示例：

let filterInput = document.getElementById("filterInput");

filterInput.addEventListener("keyup", filterNames);

function filterNames() {
  // Get value of input
  let filterValue = document.getElementById("filterInput").value.toUpperCase();

  // Get names ul
  let ul = document.getElementById("names");
  // Get lis from ul
  let li = ul.querySelectorAll("li.collection-item");

  // Loop through collection-item lis
  for (let i = 0; i < li.length; i++) {
    let a = li[i].getElementsByTagName("a")[0];
    // If matched
    if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

function do1() {
  var input1 = document.getElementById("ipt1").value;
  var a = document.createElement("a");
  a.textContent = input1;
  a.setAttribute('href', "#");
  var li = (document.createElement("li"));
  li.setAttribute('class', 'collection-item');
 
  li.appendChild(a);
  var div = document.getElementById("div1");
  div1.appendChild(li);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
<div class="container">
  <h1 class="center-align">
    My Contacts
  </h1>
  <input type="text" id="filterInput" placeholder="Search names...">
  <ul id="names" class="collection with-header">
    <li class="collection-header">
      <h5>A</h5> <input type="box" id="ipt1"> <button onclick="do1();">`click me to add another contact`</button>
    </li>


    <div id="div1">
      <li class="collection-item">
        <a href="#">Abe</a>
      </li>
      <li class="collection-item">
        <a href="#">Adam</a>
      </li>
      <li class="collection-item">
        <a href="#">Alan</a>
      </li>
      <li class="collection-item">
        <a href="#">Anna</a>
      </li>
    </div>
    <li class="collection-header">
      <h5>B</h5> <input type="box" id="ipt2">
    </li>
    <li class="collection-item">
      <a href="#">Beth</a>
    </li>
    <li class="collection-item">
      <a href="#">Bill</a>
    </li>
    <li class="collection-item">
      <a href="#">Bob</a>
    </li>
    <li class="collection-item">
      <a href="#">Brad</a>
    </li>
    <li class="collection-header">
      <h5>C</h5> <input type="box" id="ipt3">
    </li>
    <li class="collection-item">
      <a href="#">Carrie</a>
    </li>
    <li class="collection-item">
      <a href="#">Cathy</a>
    </li>
    <li class="collection-item">
      <a href="#">Courtney</a>
    </li>
  </ul>
</div>

您遇到的问题

  var item = document.createTextNode(input1); // this line was not needed as you already had the text

  var li = document.createElement('li').className = "collection-header"; // assigning a string here causing errors. Use setAttribute() not class name.

  div1.appendChild(item).innerHTML = item; assigning to innerHTML of appended child

因此从以下位置更改功能

function do1() {
  var input1 = document.getElementById('ipt1').value;
  var item = document.createTextNode(input1);
  var li = document.createElement('li').className = "collection-header";
  var a = document.createElement('a');
  var child1 = li.appendChild(a);
  var div = document.getElementById('div1');
  div1.appendChild(item).innerHTML = item;
}

至：

function do1() {
  var input1 = document.getElementById("ipt1").value; // get the value of the input
  var a = document.createElement("a"); // create new a tag
  a.textContent = input1; // Set the text of the a tag
  a.setAttribute('href', "#"); // Set the href attribute of the a tag
  var li = (document.createElement("li")); // Create new list item
  li.setAttribute('class', 'collection-item'); // Set class attribute of li tag
  li.appendChild(a); // Append the a tag to the list item
  var div = document.getElementById("div1"); // get the containing div
  div1.appendChild(li); // append the new list item to the div
}

现在，您可以在A周围附加到第一个div。要附加到其他位置，首先需要具有不同ID的div标签。然后，您只需要为每个函数创建一个新函数，或者传递您正在调用该方法的div ID即可。

希望这会有所帮助。