javascript - How do I create an edit function inside of a list?

Question

Currently I have a delete function already which is shown by a cross

So how I am doing this is by using a function that renders in the information from another database, into this list.

function renderCafe(doc){
let li = document.createElement('li');
let name = document.createElement('span');
let city = document.createElement('span');
let cross = document.createElement('div');

li.setAttribute('data-id', doc.id);
name.textContent = doc.data().name;
city.textContent = doc.data().city;
cross.textContent = 'x';

li.appendChild(name);
li.appendChild(city);
li.appendChild(cross);  

cafeList.appendChild(li);

// deleting data
cross.addEventListener('click', (e) => {
    e.stopPropagation();
    let id = e.target.parentElement.getAttribute('data-id');
    db.collection('cafes').doc(id).delete();
});}

So how do I create the edit button function like this delete one? Should it also be an EventListener that occurs when clicked?

I was thinking to have an edit button, when clicked, changes into "Update", while the static information turns into a text box with the current values.

Then when the "Update" is being clicked, it then saves the information.

I am a student, and have no prior knowledge in javascript, i took these codes from tutorials that I can find online.

标签： javascript

Answer 1

这是一个可能的解决方案，类似于您的风格。

将 替换alert为数据库更新。

确保您正在监听文档更改，并相应地更新您的 UI，以便新名称和城市将替换您的旧名称和城市。

const cafeList = document.getElementById('cafe-list');

const sampleCafes = [
{ data: () => ({ name: 'new cafe', city: 'new city'}), id: 'sample-cafe' },
];

sampleCafes.forEach(cafe => renderCafe(cafe));

function renderCafe(doc){
let li = document.createElement('li');
let name = document.createElement('p');
let city = document.createElement('p');
let nameInput = document.createElement('input');
let cityInput = document.createElement('input');
let edit = document.createElement('div');
let submit = document.createElement('div');
let cross = document.createElement('div');

li.setAttribute('data-id', doc.id);
name.textContent = doc.data().name;
city.textContent = doc.data().city;
nameInput.value = name.textContent;
cityInput.value = city.textContent;
nameInput.hidden = true;
cityInput.hidden = true;
edit.textContent = 'edit';
submit.textContent = 'submit';
submit.hidden = true;
cross.textContent = 'x';

li.appendChild(name);
li.appendChild(city);
li.appendChild(nameInput);
li.appendChild(cityInput);
li.appendChild(edit);
li.appendChild(submit);
li.appendChild(cross);  

cafeList.appendChild(li);

// deleting data
cross.addEventListener('click', (e) => {
    e.stopPropagation();
    let id = e.target.parentElement.getAttribute('data-id');
    alert(`db.collection('cafes').doc(id).delete();`);
});

// editing data
edit.addEventListener('click', (e) => {
    e.stopPropagation();
    nameInput.hidden = false;
    cityInput.hidden = false;
    submit.hidden = false;
    name.hidden = true;
    city.hidden = true;
    edit.hidden = true;
});

// submitting new data
submit.addEventListener('click', (e) => {
    e.stopPropagation();
    const id = e.target.parentElement.getAttribute('data-id');
    nameInput.hidden = true;
    cityInput.hidden = true;
    submit.hidden = true;
    name.hidden = false;
    city.hidden = false;
    edit.hidden = false;
    const newName = nameInput.value;
    const newCity = cityInput.value;
    alert(`TODO: update doc '${id}' to\n{name: '${newName}', city: '${newCity}'}.`);
});
}

<ul id="cafe-list"></ul>