mardi 31 août 2021

How to assign a new event for a second enter press

I have a phonebook, where you can add contact name and number, with click or enter press. I made Edit and a Delete button, the delete button works fine, also the Edit button, but I want when I press the Edit button and modify the value I want to be able to save it with pressing the enter not only by clicking save. A little help would be appreciated.

I tried out a few things this is the closest I got, here I can save the item by pressing enter, but it will create another table row as I already have an event assigned to enter and that fires as well

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>

Aucun commentaire:

Enregistrer un commentaire