时间戳

首页 > 解决方案 > 无法在javascript中获取子元素的文本

javascript - 无法在javascript中获取子元素的文本

问题描述

我正在尝试制作一个图书馆管理系统，其功能之一是编辑任何记录，问题是用户编辑记录并保存后，该记录应在 html 表中更新。目前，每条记录有 4 个输入：书名、作者、收件人和发行日期。一旦你更新，除了作者姓名之外的所有记录都会更新。作者姓名与最初输入的相同，不会更改。将不胜感激任何帮助。

这是编辑按钮及其事件侦听器的 Javascript 代码：

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;

        });
    });

这是问题的图像： 在 此处输入图像描述之前

更新期间在 此处输入图像描述

更新后（此处作者姓名未更新，其余部分更新） 在此处输入图片描述

标签： javascripthtmldom

解决方案

你在这里是问题所在。

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

问题在于 textContent 的拼写，您忘记在内容中添加“t”

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

推荐阅读