如何为第二次输入分配新事件

Question

我有一个电话簿，您可以在其中添加联系人姓名和号码，单击或输入按。我制作了编辑和删除按钮，删除按钮和编辑按钮都可以正常工作，但是当我按下编辑按钮并修改值时，我希望能够通过按下回车键来保存它，而不仅仅是通过单击保存。一点帮助将不胜感激。

我尝试了一些最接近的东西，在这里我可以通过按 Enter 来保存项目，但它会创建另一个表格行，因为我已经分配了一个要输入的事件并且它也会触发

let form = document.querySelector('.form');
let inputMessage = document.getElementById('inputMessage');
let table = document.querySelector('.book-table');
let tableBody = document.createElement('tbody');
let nameInput = document.getElementById('name');
let numberInput = document.getElementById('number');
let submitBtn = document.querySelector('.btn');
let editBtn = document.querySelector('.edit-btn');
let deleteBtn = document.querySelector('.delete-btn');



function addNumber() {
    if (nameInput.value != '' && numberInput.value != '') {
        let newRow = document.createElement('tr');
        let firstCol = document.createElement('td');
        let secondCol = document.createElement('td');
        let thirdCol = document.createElement('td');
        let fourthCol = document.createElement('td');
        let editBtn = document.createElement('button');
        let deleteBtn = document.createElement('button');
        firstCol.innerHTML = nameInput.value;
        secondCol.innerHTML = numberInput.value;
        firstCol.className = 'list-name';
        secondCol.className = 'list-number';
        editBtn.className = 'edit-btn';
        deleteBtn.className = 'delete-btn';
        editBtn.innerHTML = 'Edit';
        deleteBtn.innerHTML = 'Delete';
        table.appendChild(tableBody);
        tableBody.appendChild(newRow);
        newRow.appendChild(firstCol)
        newRow.appendChild(secondCol)
        newRow.appendChild(thirdCol);
        newRow.appendChild(fourthCol);
        thirdCol.appendChild(editBtn);
        fourthCol.appendChild(deleteBtn);
        nameInput.value = '';
        numberInput.value = '';
        inputMessage.style.visibility = 'visible';
        inputMessage.innerHTML = 'Contact Added Successfully';
        inputMessage.classList.add('message');
        inputMessage.classList.remove('error-message');
    } else {
        inputMessage.style.visibility = 'visible';
        inputMessage.innerHTML = 'Please fill out all required fields';
        inputMessage.classList.remove('message');
        inputMessage.classList.add('error-message');
    }
}

function editBook(e) {
    if (e.target && e.target.className == 'edit-btn') {
        e.target.innerHTML = 'Save';
        clickCount++;
        const td = e.target.parentNode.parentNode;
        // console.log(td);
        let editName = td.getElementsByTagName('td')[0];
        let editNumber = td.getElementsByTagName('td')[1];
        if (clickCount > 1) {
            // change HTML back to edit
            e.target.innerHTML = 'Edit';
            // set clickCount back to 0
            clickCount = 0;
        }
        // save the values from the input in the same table row
        let tmp = nameInput.value;
        // console.log(tmp, nameInput.value);
        nameInput.value = editName.innerHTML;
        // console.log(nameInput.value, editName.innerHtml);
        editName.innerHTML = tmp;
        // console.log(editName.innerHTML, tmp);
        let tmp2 = numberInput.value;
        numberInput.value = editNumber.innerHTML;
        editNumber.innerHTML = tmp2;
    }
}




let enterCount = 0;
numberInput.addEventListener('keydown', function (e) {
    let dynamicTd = document.getElementsByTagName('td');

    if (e.keyCode == 13) {
        if (numberInput.value != '' && nameInput.value != '' && enterCount < 1) {
            addNumber();
            enterCount++;
        } else if (editBtn.innerHTML = 'Save') {
            if (clickCount > 1) {
                dynamicTd[2].innerHTML = 'Edit';
                clickCount = 0;
            }
            let tmp = nameInput.value;
            nameInput.value = dynamicTd[0].innerHTML;
            dynamicTd[0].innerHTML = tmp;
            let tmp2 = numberInput.value;
            numberInput.value = dynamicTd[1].innerHTML;
            dynamicTd[1].innerHTML = tmp2;
            enterCount = 0;
        }

    }
});

<form action="" class="form">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" required autocomplete="off">
            <label for="number">Phone</label>
            <input type="number" id="number" name="number" required>
        </form>

        <button type="submit" class="btn">Add Contact</button>
    </div>
    <!-- Add error and success message -->
    <div id="inputMessage" class="message">
    </div>
    <table class="book-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone Number</th>
                <th colspan="2">Action</th>
            </tr>
        </thead>

Answer 1

您可以在变量中跟踪您的编辑状态。然后，当您按 Enter 键时，让您的函数使用 if 语句检查变量。退出创建新行，然后您应该只进行编辑。