lundi 20 juin 2022

Checkboxes not working, they all control the original one created I have adjusted many times and cant seem to get it right

Checkboxes are being created in displayBookCard() but Im not understanding whats causing this. I ended up adding a spexific class to each individual checkbox but doesnt seem to help.

https://codepen.io/migijc/pen/QWQRwvN

let displayBookCards = function (index){
    let bookCard= document.createElement("div");
    let removeButton=document.createElement("button")
    removeButton.textContent="Remove Book"
    let titleToDisplay=document.createElement('h4');
    titleToDisplay.classList.add("titleToDisplay")
    let authorToDisplay=document.createElement("h4");
    let pagesToDisplay= document.createElement('h4');
    let hasReadToDisplay=document.createElement('h4')
    booksGrid.appendChild(bookCard)
    bookCard.appendChild(titleToDisplay)
    bookCard.appendChild(authorToDisplay)
    bookCard.appendChild(pagesToDisplay)
    bookCard.appendChild(hasReadToDisplay);
    bookCard.appendChild(removeButton);
    removeButton.classList.add("removeButton")
    bookCard.classList.add("bookCards")
    body.appendChild(booksGrid)
    myLibrary.forEach((item) => {
        titleToDisplay.textContent=item.bookName
        authorToDisplay.textContent= `By: ${item.bookAuthor}`;
        pagesToDisplay.textContent=`Pages: ${item.bookPages}`;
        hasReadToDisplay.textContent=`Book Read: ${item.bookRead}`;
    });
        // bookCard.appendChild(toggleButtonContainer)
        booksGrid.classList.add("showing")
        removeBook(removeButton);
        bookCard.setAttribute("data-index", index)
        addClassToRemoveButton(removeButton)
        removeClassFromRemoveButton(removeButton)
        appendToggle(bookCard, index)
     

};

  let appendToggle= function (bookCard,index) {
    let toggleButtonContainer=document.createElement("div")
    let toggleButton=document.createElement("input")
    let toggleLabel=document.createElement('label')
    toggleButtonContainer.setAttribute("class", "toggleButtonContainer")
    toggleButton.setAttribute("value", "notRead")
    toggleButton.setAttribute("type","checkbox")
    toggleButton.setAttribute("class", "toggle")
    toggleButton.setAttribute("name", "toggleStatus")
    toggleButton.setAttribute("id", "toggleStatus")
    toggleLabel.setAttribute("for", "toggleStatus")
    toggleButtonContainer.appendChild(toggleButton)
    toggleButtonContainer.appendChild(toggleLabel)
    bookCard.appendChild(toggleButtonContainer)
    toggleButton.classList.add(index)
  }



Aucun commentaire:

Enregistrer un commentaire