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