I've checked so many variations of why the object Object appears and can't seem to find a solution. I need to fill in the form and then show the filled information in the empty space beside. But as I said, I've tried many things and can't seem to find my problem.
I would really appreciate some help.
Thanks.
const
localStorageKey = 'storedbookShelf',
myForm = document.getElementById('form'),
showAll = document.getElementById('showall');
const retrieveBookShelf = localStorage.getItem(localStorageKey);
let bookShelf = retrieveBookShelf ? JSON.parse(retrieveBookShelf) : [];
function BookDetails(title, author, pages, pagesread, completed, recommend){
this.title = title,
this.author = author,
this.pages = pages,
this.pagesread = pagesread,
this.completed = completed,
this.recommended = recommended
}
var title = document.getElementById("booktitle").value;
var author = document.getElementById("author").value;
var pages = document.getElementById("pages").value;
var pagesread = document.getElementById("pagesread").value;
var completed = document.getElementById("completed").value;
var recommended = document.getElementById("recommended").value;
newBookAdd = new BookDetails(title, author, pages, pagesread, completed, recommended)
bookShelf.push(newBookAdd)
var storeBooks = JSON.stringify(bookShelf);
window.localStorage.setItem("storedbookShelf", (storeBooks));
myForm.addEventListener('submit', e =>
{
e.preventDefault();
showAll.textContent = bookShelf;
}
);.container {display: grid;
grid-template-columns: 1fr 1fr;
padding-left: 20px;}<div class="container">
<div id="formcontainer" class="no-display">
<form id="form">
<h2>Add a new book</h2>
<label for="booktitle">Book Title</label><br>
<input type="text" id="booktitle" name="booktitle"><br>
<label for="author">Author</label><br>
<input type="text" id="author" name="author"><br>
<label for="pages">Number of Pages</label><br>
<input type="text" id="pages" name="pages"><br>
<label for="pagesread">Amount of Pages Read</label><br>
<input type="text" id="pagesread" name="pagesread"><br>
<input type="checkbox" id="completed" name="completed" value="Completed">
<label for="completed">Have you completed this book?</label><br>
<input type="checkbox" id="recommended" name="recommended" value="Recommended">
<label for="recommended">Would you recommend this book?</label><br>
<input type="submit" id="submitform" value="Submit">
</form>
</div>
<div id="showall"></div>
</div>You can't directly display a JS Object in a DOM element.
You need to format his values in a HTML syntax.
I made this for you, by using an HTML table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
}
#my-form, #showall {
display : inline-block;
vertical-align: top;
}
fieldset {
margin : 2rem;
width : 16rem;
}
legend {
font-weight : bold;
font-size : 1.4rem;
margin-bottom : .2rem;
}
label {
display : block;
margin-top : 0.8em;
font-size : .9rem;
}
input:not([type=checkbox]) {
display : block;
}
button {
margin-top : 1rem;
margin-right : 1rem;
width : 40%;
}
table {
border-collapse : separate;
border-spacing : 1px;
background-color : lightslategrey;
}
th { background : lightsteelblue; padding: .3em .6em; }
td { background : whitesmoke; padding: .2em .5em; }
</style>
</head>
<body>
<form id="my-form">
<fieldset>
<legend> Add a new book </legend>
<label>
Book Title
<input name="booktitle" type="text" required>
</label>
<label>
Author
<input name="author" type="text" required>
</label>
<label>
Number of Pages
<input name="pages" type="number" value="1" required>
</label>
<label>
Amount of Pages Read
<input name="pagesread" type="number" value="1" required>
</label>
<label>
<input name="completed" type="checkbox" value="completed">
Have you completed this book?
</label>
<label>
<input name="recommended" type="checkbox" value="recommended">
Would you recommend this book?
</label>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</fieldset>
</form>
<table id="showall">
<thead>
<tr><th>title</th><th>author</th><th>pages</th><th>pagesread</th><th>completed</th><th>recommended</th></tr>
</thead>
<tbody></tbody>
</table>
<script>
const
localStorageKey = 'storedbookShelf'
, myForm = document.querySelector('#my-form')
, showAll = document.querySelector('#showall tbody')
, bookShelf = JSON.parse( localStorage.getItem(localStorageKey) || '[]' )
;
updateShowall()
;
myForm.addEventListener('submit', e =>
{
e.preventDefault();
let book = Object.fromEntries(new FormData(myForm).entries());
book.completed ??= 'nope';
book.recommended ??= 'nope';
bookShelf.push(book);
localStorage.setItem(localStorageKey, JSON.stringify( bookShelf ));
myForm.reset();
updateShowall();
});
function updateShowall()
{
showAll.innerHTML = '';
bookShelf.forEach( book =>
{
let xRow = showAll.insertRow();
xRow.insertCell().textContent = book.booktitle;
xRow.insertCell().textContent = book.author;
xRow.insertCell().textContent = book.pages;
xRow.insertCell().textContent = book.pagesread;
xRow.insertCell().textContent = book.completed;
xRow.insertCell().textContent = book.recommended;
});
}
</script>
</body>
</html>