Почему не редактируется контакт?

Question

[kikosko]

При клике по кнопке не происходит редактирование данных полученных с значения инпута и отображается ошибка: "Uncaught TypeError: Cannot read property 'dataset' of null".
Понимаю что это связано с тем что метод не видит созданных "tr". Помогите пожалуйста решить эту проблему

// create table    
load() {
        let tBody = document.querySelector('tbody');

        tBody.innerHTML = '';

        for (let i = 0; i < this.items.length; i++) {
            let tr = document.createElement('tr');
            tr.classList.add('data');
            tr.dataset.id = i;
            tr.innerHTML = `
                                <th scope="row" class="checkBox"><input type="checkbox" class="form-check-input" bid ="${i}"></th>
                                <td>${this.items[i].fname}</td>
                                <td>${this.items[i].phone}</td>
                                <td>${this.items[i].email}</td>
                                <td ><i class="far fa-edit" data-id="edit"></i> | <i class="far fa-trash-alt"  data-id="rubbish"></i></td>
                            `;
            tBody.append(tr);
        }

        this.list = [];
        this.checkedList = [];
        this.multiSel();
    }

// edit contact 

    edit(i) {

        const d = document;

            const fname = d.querySelector('#Edname').value;
            const phone =  d.querySelector('#Edphone').value;
            const email =  d.querySelector('#Edemail').value;
            this.items[i] = new BookItem(fname,phone,email);

        this.save();
        this.load();

    }
window.onload = () => {
btnS.addEventListener('click', (e) => {

        app.UserBook.edit(+e.target.closest('tr').dataset.id);
},false);
}

Так же пробовал решить это по другому, создал метод "getBookItem()" в котором записывал по дата атрибуту tr в масив и потом использовал этот метод в виде итератора в методе редактирования edit(), но без результата

getBookItem() {
       let tr = document.querySelectorAll(".data");
        let contact;
        for (let i =0; i< tr.length;i++ ) {
            contact = tr[i];
                this.updateContacts.push(parseInt(contact.getAttribute("data-id")));
        }
        console.log(contact);
    }

    edit() {

        const d = document;
        const  i = this.getBookItem();
        const fname = d.querySelector('#Edname').value;
        const phone =  d.querySelector('#Edphone').value;
        const email =  d.querySelector('#Edemail').value;

        this.items[i] = new BookItem(fname,phone,email);

        this.save();
        this.load();

    }
    btnS.addEventListener('click', () => {
        app.UserBook.edit();
    },false);

Весь мой код

Answer 1

[0xD34F]

Что за бред-то такой с получением индекса редактируемой строки, вы сами-то понимаете, что делаете? Его надо запоминать при открытии диалогового окна (скажем, так), а вовсе не... не... даже и не знаю, как это назвать, реально БРЕД.