How to make a button inside a form update a child of that row

Question

I am working on a simple library project where you have an array of Objects and you populate it by creating book objects with the Book constructor I made.

I was able to find a way to make a function that shows the books currently in the array and was even able to make a button as the last child in the row. The button does not do anything currently but I would like it to update the "unread" status to "read" when clicked.

I added a prototype to the Book constructor so that all books would have the function that changes its read property to "read", clears the table, and recalls the displayBooks function so the table is now showing updated info.

It works when I call it in the console as book.readStatus(); but wherever I try to add the event Listener to the button it creates errors in the code.

I think the best way would be to add an e vent listener to the button so that way it changes the child above it but cannot figure that part out. If there is a better way to get the update button to change the read status that would be great too.

Here is the code:

let myLibrary = [];

// Constructor
function Book(title, author, pages) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = "unread";
    this.button = document.createElement('button');
}

Book.prototype.readStatus = function() {
    this.read = "read";
    clearTable();
    displayBooks();
};



// Function to add to Libaray Array
function addBookToLibrary(obj) {
    myLibrary.push(obj);
}

const imHappyForYou = new Book("I'm Happy for you", "Kay Wills Wyma", 231);
const theHobbit = new Book("The Hobbit", "JRR Tolkien", 298);
const crazyRichAsians = new Book("Crazy Rich Asians", "Kevin Kwan", 576);

addBookToLibrary(imHappyForYou);
addBookToLibrary(theHobbit);
addBookToLibrary(crazyRichAsians);

// var table = document.getElementById("table");  // set to table

let myTable = document.querySelector('#table');
let headers = ['Title', 'Author', 'Pages', 'Read/Unread', 'Update Read Status'];

function displayBooks() {
    let table = document.createElement('table');
    let headerRow = document.createElement('tr');

    headers.forEach(headerText => {
        let header = document.createElement('th');
        let textNode = document.createTextNode(headerText);
        header.appendChild(textNode);
        headerRow.appendChild(header);
    });
    
    table.appendChild(headerRow);

    myLibrary.forEach(book => {
        let row = document.createElement('tr');

        Object.values(book).forEach(text =>{
            if(text == book.button) {
                let cell = document.createElement('td');
                let makeButton = document.createElement('button');
                makeButton.innerHTML = "Update";
                cell.appendChild(makeButton);
                row.appendChild(cell);
            } else {
            let cell = document.createElement('td');
            let textNode = document.createTextNode(text);
            cell.appendChild(textNode);
            row.appendChild(cell);
            }
        });
        table.appendChild(row);
    });

    myTable.appendChild(table);
}

displayBooks();

let clearTable = function() {
    const table = document.getElementById('table');
    table.innerHTML = '';
}

Answer 1

Try

let myLibrary = [
new Book("I'm Happy for you", "Kay Wills Wyma", 231),
new Book("The Hobbit", "JRR Tolkien", 298),
new Book("Crazy Rich Asians", "Kevin Kwan", 576)
];

// Constructor
function Book(title, author, pages) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = "unread";
    this.button = document.createElement('button');
}

Book.prototype.readStatus = function() {
    this.read = "read";
    clearTable();
    displayBooks();
};

let myTable = document.querySelector('#table');
let headers = ['Title', 'Author', 'Pages', 'Read/Unread', 'Update Read Status'];

function displayBooks() {
    let table = document.createElement('table');
    let headerRow = document.createElement('tr');

  headers.forEach(headerText => {
      let header = document.createElement('th');
      let textNode = document.createTextNode(headerText);
      header.appendChild(textNode);
      headerRow.appendChild(header);
  });

  table.appendChild(headerRow);

  myLibrary.forEach(book => {
      let row = document.createElement('tr');
      Object.values(book).forEach(text =>{
        if(text == book.button) {
          let cell = document.createElement('td');
          let makeButton = document.createElement('button');
          makeButton.innerHTML = "Update";
          makeButton.onclick = () => {
            book.read = "read";
            clearTable();
            displayBooks();
          }
          cell.appendChild(makeButton);
          row.appendChild(cell);
        } else {
        let cell = document.createElement('td');
        let textNode = document.createTextNode(text);
        cell.appendChild(textNode);
        row.appendChild(cell);
        }
      });
      table.appendChild(row);
    });

    myTable.appendChild(table);
  }

  displayBooks();

  let clearTable = function() {
    const table = document.getElementById('table');
    table.innerHTML = '';
  }

<div id="table"></div>