Javascript/HTML HW Assignment Help

[dusk grotto]

This assignment is to create a small library app using a Book Class in JS. I have everything done except for a markRead method it wants me to make in the Class. I'm having trouble conceptualizing one of the steps.

This is my JS for the project.

class Book {
    constructor(title, author, read) {
        this.title = title;
        this.author = author;
        this.read = read;
    }

}

    //Create a new library class for constructing.
    class Library {
        constructor(count, books) {
        this.count = count;
        this.books = books;
        }

         markRead = function (checkbox, id) {

            for (let i = 0; i <= books.length; i++) {
 
              if (xxx id == b) {
                  this.markRead = true;
                  document.checkbox = true;
                  check = true;
              }

            }

And this is the section of the HTML that goes along with it.

            <tbody>
              <tr>
                <td>Name of the Wind</td>
                <td>Patrick Rothfuss</td>
                <td>
                  <input
                    type="checkbox"
                    name="read"
                    id="readLibraryCheckbox"
                    checked
                    disabled
                  />
                </td>
              </tr>
            </tbody>

I'm on the markRead section of these instructions.

1. Create a class `Book` that has the following properties:
   - Title (string)
   - Author (string)
   - Read (boolean)
2. Create a class `Library` that has the following properties and methods:
   - Book count (number)
   - Books (array of books)

  - `markRead` method that will:
     - Take in a parameter `checkbox` and `id`
     - Loop through the library books
     - If the book id is the same as the param id, change the book read property to true, the `checkbox` checked attribute to true, and the `checked` disabled attribute to true

I'm having a lot of trouble envisioning how to make the loop it mentions. I'm guessing I need to use setAttribute in some way to change the checkbox.

[dapper pivot]

You make an array of all the books, loop through each one, if the id of the book is the one you're looking for you mark it as read, tick the check box and disable it from being changed

It's pretty much asking you to make this functional

         markRead = function (checkbox, id) {

            for (let i = 0; i <= books.length; i++) {
 
              if (xxx id == b) {
                  this.markRead = true;
                  document.checkbox = true;
                  check = true;
              }

            }```

[dusk grotto]

Thanks. A teacher helped explain it to me. I was probably more lost than you could imagine.

[dusk grotto]

I'm actually having trouble again with this same method. I need markRead to make it so the checkboxes appear checked/unchecked, but grayed out so they aren't selectable. I'm not sure what part of the code would even control the boxes.

This is my full code for the method. I believe that part at the end should affect how the boxes function, but all it does is literally write true or false to the webpage.

markRead(id) {
    //Query select for all the inputs that have a type attribute equal to "checkbox"
    const allCheckboxInputs = document.querySelectorAll(
      "input[type = checkbox]"
    );
    //Select the checkbox that corresponds with the given id.
    let checkbox = allCheckboxInputs[id + 1];

    //Books works because this is still in the Library class.
    for (let i = 0; i < this.books.length; i++) {
      if (id == this.books[i].id) {
        this.books[i].read = true;
        checkbox.checked = false;
        //Checkbox disabled = unclickable.
        checkbox.disabled = true;
      }
    }
  }

[dapper pivot]

I havent looked up the answer so some advice since no one answered

Try just write a basic function that specifically targets a single checkbox then mess around with it, see what does what and why.

You can try log the checkbox itself and see what values it holds

Try learn through experimenting 👍

If you still can't do it after that you can maybe make a code pen and I can try have a look