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