@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);

Весь мой код
  • Вопрос задан
  • 93 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Что за бред-то такой с получением индекса редактируемой строки, вы сами-то понимаете, что делаете? Его надо запоминать при открытии диалогового окна (скажем, так), а вовсе не... не... даже и не знаю, как это назвать, реально БРЕД.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
summer Ярославль
от 100 000 до 140 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
19 апр. 2024, в 20:43
20000 руб./за проект
19 апр. 2024, в 20:11
500 руб./за проект