Cannot get the text of a child element in javascript

Question

I am trying to make a library management system and one of its feature is to edit any record and the problem is that after a user edits a record, and saves it, the record should then be updated in the html table. Currently there are 4 inputs for every record: book name, author, recipient and date of issueing. As soon as u update, all of the records except the author name is updated. The author name remains the same as entered initially and does not change. Would be grateful to any help.

Here is the Javascript code for the edit button with its event listener:

let item1 = document.createElement('td');
    let item2 = document.createElement('td');
    let item3 = document.createElement('td');
    let item4 = document.createElement('td');
    let item5 = document.createElement('td');
    let item6 = document.createElement('td');
    let btnRemove = document.createElement('button');
    let btnEdit = document.createElement('button');

    item1.innerHTML = bookTitle;
    item2.innerHTML = author;
    item3.innerHTML = recipient;
    item4.innerHTML = dateIssued;
    btnRemove.className = 'btn btn-outline-danger btn-remove';
    btnRemove.textContent = 'X';
    btnEdit.className = 'btn btn-outline-success btn-edit';
    btnEdit.textContent = 'Edit';
    

    itemRow.appendChild(item1);
    itemRow.appendChild(item2);
    itemRow.appendChild(item3);
    itemRow.appendChild(item4);
    item6.appendChild(btnEdit);
    item5.appendChild(btnRemove);
    itemRow.appendChild(item6);
    itemRow.appendChild(item5);
    list.appendChild(itemRow);

    //restting the form
    form.reset();

    

    btnEdit.addEventListener('click', (e)=>{
        console.log('success');
        msgArea.className = 'alert alert-info';
        msgArea.textContent = 'Edit the fields'
        setTimeout(()=>msgArea.remove(), 3000);

        document.querySelector('#title').value = bookTitle;
        document.querySelector('#author').value = author;
        document.querySelector('#recipient').value = recipient;
        document.querySelector('#date-issued').value = dateIssued;

        submitBtn.style.display = 'none';
        let saveEditBtn = document.createElement('button')
        saveEditBtn.className = 'btn btn-dark'
        saveEditBtn.textContent = 'Save';
        document.querySelector('.btns').appendChild(saveEditBtn);

        saveEditBtn.addEventListener('click', (e)=>{
            let newTitle = document.querySelector('#title').value;
            let newAuthor = document.querySelector('#author').value;
            let newRecipient = document.querySelector('#recipient').value;
            let newDate = document.querySelector('#date-issued').value;
            form.reset();
            saveEditBtn.style.display = 'none';
            submitBtn.style.display = 'block';

            console.log(btnEdit.parentElement.parentElement.children[1].textContent)

            btnEdit.parentElement.parentElement.children[0].textContent = newTitle;
            btnEdit.parentElement.parentElement.children[1].textConent = newAuthor;//HERE IS THE PROBLEM
            btnEdit.parentElement.parentElement.children[2].textContent = newRecipient;
            btnEdit.parentElement.parentElement.children[3].textContent = newDate;

        });
    });

Here are the images of the problem: before enter image description here

during updating enter image description here

after being updated (here the author name is not updated while the rest is) enter image description here

Answer 1

NOTE:- There is a spelling mistake that has caused an error and nothing else is wrong in the code.

Answer 2

you are right here is the problem.

btnEdit.parentElement.parentElement.children[1].textConent = newAuthor; //HERE IS THE PROBLEM

the problem is with the spelling of textContent, you forgot to add a 't' in content

btnEdit.parentElement.parentElement.children[1].textContent = newAuthor; //HERE IS THE SOLUTION