添加li到ul，查找是否存在

Question

我正在添加认为从输入字段进入列表。 添加功能运行良好，但我想检查用户想要添加的字符串是否已存在。 所以我想要这样的东西，但不知道正确使用的功能

HTML

First name:
<input type="text" id="firstname">
<br>
<p>Other people's names:</p>
<ul id="demo"></ul>
<input type='button' onclick='changeText2()' value='Submit' /> 

JavaScript的

var list = document.getElementById('demo');

function changeText2() {
    var firstname = document.getElementById('firstname').value;
    var listElement = list.getElementsByTagName("li");
    // here is the missing code
    if (listElement.text is not in list){
        var entry = document.createElement('li');
        entry.appendChild(document.createTextNode(firstname));
        list.appendChild(entry);
    }
    else alert("is already in !");
}

编辑*

上面的代码来自jsfiddle 。

Answer 1

您可以创建一个数组并在其中输入每个名称，这是您第一次添加。 因此，每次尝试插入新项目时，都会检查数组以查看是否已添加此名称。 在代码方面：

var addedNames = [];
var list = document.getElementById('demo');

function changeText2() {
    var firstname = document.getElementById('firstname').value;

    // Array object has a method called indexOf, with only one argument
    // the item we are looking for. If this item is not in the array, the 
    // method returns -1. Otherwise, the method returns it's position.
    // For instance, let that we have defined the following array. 
    // var numbers = [1,2,3,4].
    // Then numbers.indexOf(5) returns -1.
    // While numbers.indexOf(4) returns 3.
    if (addedNames.indexOf(firstname)==-1){
        var entry = document.createElement('li');
        entry.appendChild(document.createTextNode(firstname));
        list.appendChild(entry);
        // We add the inserted name in the array for later checks.
        addedNames.push(firstname);
    }
    else alert("is already in !");
}

请看看JSFiddle

Answer 2

用firstname替换listElement.text 。

listElement.text将返回<li> ，因此listElement.text将是未定义的。 你可以用console.log来检查它

function changeText2() {
var firstname = document.getElementById('firstname').value;
var listElement = list.getElementsByTagName("li");

if (addedNames.indexOf(firstname)==-1){
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(firstname));
    list.appendChild(entry);
    // We add the inserted name in the array for later checks.
    addedNames.push(firstname);
    console.log(addedNames)
}
else alert("is already in !");

}