I have an array of book objects. I want to put a checkbox that can say whether a book has been read. like they click a checkbox, it will say read. if not, it stays as not read. but its only working for the first checkbox. Here is my code. what am I missing?
var books = [];
var totalBooks = 0;
function Book(title, author, pages, genre,status,id) {
this.title = title;
this.author = author;
this.pages = pages;
this.genre = genre;
this.status = status;
this.id=id;
}
Book.prototype.fullBook = function() {
return this.id + "," + this.title + ", " + this.author + ", " + this.genre + "," + this.status + "" + this.pages;
}
this.toggleStatus = function(id) {
this.status = !this.status
}
function resetFields(){
$("input#new-genre").val("");
$("input#new-status").val("");
$("input.new-title").val("");
$("input.new-author").val("");
$("input.new-pages").val("");
$("div.new-books").not(':first').remove();
}
$(document).ready(function() {
$("#add-books").click(function() {
$("#new-books").append('<div class="new-books">' +
'<div class="form-group">' +
'<label for="new-title">title</label>' +
'<input type="text" class="form-control new-title">' +
'</div>' +
'<div class="form-group">' +
'<label for="new-author">author</label>' +
'<input type="text" class="form-control new-author">' +
'</div>' +
'<div class="form-group">' +
'<label for="new-pages">Page</label>' +
'<input type="text" class="form-control new-pages">' +
'</div>' +
'<div class="form-group">' +
'<label for="new-genre">Genre</label>' +
'<input type="text" class="form-control new-genre">' +
'</div>'+
'<div class="form-group">' +
'<input type="checkbox" class="form-control new-status" id="not read">' +
'<label for="new-status">read</label>' +
'</div>'+
'</div>');
});
$("form#new-contact").submit(function(event) {
event.preventDefault();
var bookList = JSON.parse(localStorage.getItem('books'));
$(".new-books").each(function() {
var inputtedGenre = $(this).find("input#new-genre").val();
var inputtedtitle = $(this).find("input.new-title").val();
var inputtedauthor = $(this).find("input.new-author").val();
var inputtedPage = $(this).find("input.new-pages").val();
var inputtedStatus = '';
var newDate = new Date();
var inputtedId = newDate.getTime();
console.log(inputtedId);
if (document.querySelector('#read').checked == true) inputtedStatus = 'read';
else inputtedStatus = 'not read';
var newBook = new Book( inputtedtitle, inputtedauthor, inputtedPage, inputtedGenre, inputtedStatus,inputtedId)
books.push(newBook);
localStorage.setItem('books', JSON.stringify(books));
for (i = 0 ; i<bookList.length; i++){
$("#books").append("<tr><td> "+newBook.title+"</td><td>"+newBook.author+"</td><td>"+newBook.genre+"</td><td>"+newBook.pages+"</td><td id='console-event'>" +newBook.status+ "</td><td><button class='toggle' data-index = '${i}'>Toggle Read</button><button id='delete' class='delete-button' data-index = '${i}'>Remove Book</button></td></tr>");
}
console.log(newBook.id);
console.log(books);
$(document).on("click", "#delete-"+newBook.id, function(ev) {
let idValue = $(this)[0].id;
let bookIndex = books.findIndex(x=> x.id == idValue);
deletebook(bookIndex, idValue)
//books[bookIndex].contact = $(this).val();
});
// const button = document.createElement("button");
// button.bind("click", function () {
// books.splice(i, 1);
// });
});
console.table(books);
resetFields();
});
/*
if(book.read) {
readInput.classList.add('btn','btn-primary', 'w-100');
readInput.value = 'Read';
} else {
readInput.classList.add('btn','btn-secondary', 'w-100');
readInput.value = 'Unread';
}
readInput.addEventListener('click', (e) => {
if(book.read) {
book.read = false;
readInput.classList.remove('btn','btn-primary');
readInput.classList.add('btn','btn-secondary');
readInput.value = 'Unread';
} else {
book.read = true;
readInput.classList.remove('btn','btn-secondary');
readInput.classList.add('btn','btn-primary');
readInput.value = 'Read';
}
});
*/
function getValueFor(id) {
return $(id).val();
}
function deletebook(i, idValue) {
for (let i = 0; i < books.length; i++) {
books.splice(i, 1);
$("#table#books-"+idValue).remove();
resetFields();
console.log(books);
}
}
function updateStatus(id) {
let toToggle = bookLibrary.find(book => book.id == id);
bookLibrary[bookLibrary.indexOf(toToggle)].toggleStatus();
outputLibrary();
}
/* $('#read').click(function() {
if ($(this).is(':checked')) {
$(this).siblings('label').html('read');
console.log("checked");
} else {
$(this).siblings('label').html(' not read yet');
}
});
*/
});