时间戳

首页 > 解决方案 > Javascript：为什么即使我只提供了一个新输入，它也会显示两个新输入？

javascript - Javascript：为什么即使我只提供了一个新输入，它也会显示两个新输入？

问题描述

我对 Javascript 很陌生，如果有任何帮助，我将不胜感激。我的计划是创建一个联系人列表。当有人提供一个新的联系人时，它应该立即与所有其他姓氏以相同字母开头的联系人一起显示在其下方的表格中。不幸的是，它似乎只适用于前 2 个输入。当我添加第三个联系人时，它会在表中添加两行，而它应该只是多行。另一个问题是当我点击取消按钮时它不起作用。只有在第二次单击时它才起作用，并且像第二次单击后的 INSERT 按钮一样，它一次删除 2 行。谁能向我解释问题出在哪里？正如我在感谢任何帮助之前所写的那样。谢谢

var contacts = [];

            function insert(){

                var name = document.getElementById("name").value;
                var surname = document.getElementById("surname").value;
                var number = document.getElementById("number").value;

                if ( !(/^[a-zA-Z\s]*$/.test(name)) || !(/^[a-zA-Z\s]*$/.test(surname)) || !(/^[0-9]*$/.test(number)) ){
                    alert("Something's wrong");
                    return;
                }

                var user = {
                    firstName : name,
                    lastName : surname,
                    telNumber : number
                };

                contacts.push(user);
                contacts.sort(compare);

                var letter = surname.toUpperCase().charAt(0);

                show(letter);
 
            }

            function compare( a, b ) {
                if ( a.lastName.toUpperCase() < b.lastName.toUpperCase() )
                        return -1;

                if ( a.lastName.toUpperCase() > b.lastName.toUpperCase() )
                    return 1;
                
                if ( a.firstName.toUpperCase() < b.firstName.toUpperCase() )
                    return -1;
                if ( a.firstName.toUpperCase() > b.firstName.toUpperCase() )
                    return 1;
        
                return 0;
            }

            function show(l){

                empty();

                var table = document.getElementById("table");

                for (var i=0; i<contacts.length; i++){

                    if (contacts[i].lastName.toUpperCase().charAt(0) == l){

                        var row = document.createElement('tr');

                        for (var j=0; j<3; j++){

                            var tile = document.createElement('td');
                            
                            switch(j){
                                case 0: tile.textContent = contacts[i].lastName; break;
                                case 1: tile.textContent = contacts[i].firstName; break;
                                case 2: tile.textContent = contacts[i].telNumber; 
                            }
                            row.appendChild(tile);
                        }
                        table.appendChild(row);
                    }
                }
            }

            function empty(){

                var rows = document.getElementsByTagName('tr');


                for (var i=1; i<rows.length; i++){

                    var tiles = rows[i].children;

                    for (var j=0; j<tiles.length; j++)
                        tiles[j].parentNode.removeChild(tiles[j]);
                    
                    rows[i].parentNode.removeChild(rows[i]);
                }

            }

function cancel(){

                var name = document.getElementById("name").value;
                var surname = document.getElementById("surname").value;

                if ( !(/^[a-zA-Z\s]*$/.test(name)) || !(/^[a-zA-Z\s]*$/.test(surname)) ) return;
                
                var index=0;
                while ( (contacts[index].lastName != surname) || (contacts[index].firstName != name) ) index++;

                contacts.splice(index,1);

                var letter = surname.toUpperCase().charAt(0);

                show(letter);
            }
table{
                border-collapse: collapse;
                border: 1px black solid;
            }
<!DOCTYPE html>
<html lang="eng">
    <head>

        <meta charset="utf-8">
        <title>Contacts List</title>
            </head>

    <body>
        <div id="left-container" class="container">

            <div id="insert-container" class="sub-container">
                <p>Surname</p><input type="text" name="surname" id="surname">
                <p>Name</p><input type="text" name="ame" id="name">
                <p>Telephone Number</p><input type="text" name="number" id="number"><br>

                <button onclick="insert()">INSERT</button><button onclick="cancel()">CANCEL</button>
            </div>
        </div>

        <div id="right-container" class="container">
            <table id="table">
                <tr><th>Surname</th><th>Name</th><th>Tel. Num.</th></tr>
            </table>
        </div>
    </body>

</html>

标签： javascripthtml

解决方案

有两个主要问题。首先是empty无法正常工作的功能。因为您在所有循环中都进行了循环，tr所以您将其删除！因此，在添加两行后，您错过了第一行以将其删除。操纵在其上循环的数组的长度并不是一个好主意。（通过删除您更改行的长度）

我empty用简单的方法改变了方法：

var mytbl = document.getElementById("table");
mytbl.innerHTML = mytbl.rows[0].innerHTML;

另一个问题是你从不检查方法中的长度，contacts如果cancel没有更多的联系并且仍然点击控制台中出现一些错误，所以检查长度，contacts如果它是空的，则从函数返回：

var contacts = [];

function insert() {
    debugger
    var name = document.getElementById("name").value;
    var surname = document.getElementById("surname").value;
    var number = document.getElementById("number").value;

    if (!(/^[a-zA-Z\s]*$/.test(name)) || !(/^[a-zA-Z\s]*$/.test(surname)) || !(/^[0-9]*$/.test(number))) {
        alert("Something's wrong");
        return;
    }

    var user = {
        firstName: name,
        lastName: surname,
        telNumber: number
    };

    contacts.push(user);
    contacts.sort(compare);

    var letter = surname.toUpperCase().charAt(0);

    show(letter);

}

function compare(a, b) {
    if (a.lastName.toUpperCase() < b.lastName.toUpperCase())
        return -1;

    if (a.lastName.toUpperCase() > b.lastName.toUpperCase())
        return 1;

    if (a.firstName.toUpperCase() < b.firstName.toUpperCase())
        return -1;
    if (a.firstName.toUpperCase() > b.firstName.toUpperCase())
        return 1;

    return 0;
}

function show(l) {
    empty();
    var table = document.getElementById("table");
    for (var i = 0; i < contacts.length; i++) {
        if (contacts[i].lastName.toUpperCase().charAt(0) == l) {
            var row = document.createElement('tr');
            for (var j = 0; j < 3; j++) {
                var tile = document.createElement('td');
                switch (j) {
                    case 0: tile.textContent = contacts[i].lastName; break;
                    case 1: tile.textContent = contacts[i].firstName; break;
                    case 2: tile.textContent = contacts[i].telNumber;
                }
                row.appendChild(tile);
            }
            table.appendChild(row);
        }
    }
}

function empty() {
    var mytbl = document.getElementById("table");
    mytbl.innerHTML = mytbl.rows[0].innerHTML;

}

function cancel() {
    if (contacts.length == 0)
        return;
    var name = document.getElementById("name").value;
    var surname = document.getElementById("surname").value;

    if (!(/^[a-zA-Z\s]*$/.test(name)) || !(/^[a-zA-Z\s]*$/.test(surname))) return;

    var index = 0;
    while ((contacts[index].lastName != surname) || (contacts[index].firstName != name)) index++;

    contacts.splice(index, 1);

    var letter = surname.toUpperCase().charAt(0);

    show(letter);
}
<div id="left-container" class="container">
    <div id="insert-container" class="sub-container">
        <p>Surname</p><input type="text" name="surname" id="surname">
        <p>Name</p><input type="text" name="ame" id="name">
        <p>Telephone Number</p><input type="text" name="number" id="number"><br>

        <button onclick="insert()">INSERT</button><button onclick="cancel()">CANCEL</button>
    </div>
</div>

<div id="right-container" class="container">
    <table id="table">
        <tr><th>Surname</th><th>Name</th><th>Tel. Num.</th></tr>
    </table>
</div>

推荐阅读