I'm currently working on a library project, where you have a form where you put different information about a book, and also you have to check a checkbox if you have read the book. Well, the thing that I want to do is, if the checkbox is checked, I want the text content that is gonna be displayed in the html to be Read or if the checbox ain't checked the text content to be Not read. Thanks in advance, and sorry if this question bothers anyone
function intakeFormData() {
let Title = document.getElementById("Title").value;
let Author = document.getElementById("Author").value;
let Pages = document.getElementById("Pages").value;
let Read = document.getElementById("Read").value;
if (Read === true) {
Read.textContent = "Read";
} else {
Read.textContent = "Not read";
}
}<body>
<div class="container">
<div class="form-heading">
<h1>Add new book to the library</h1>
</div>
<div class="books-heading">
<h1>Current books in the library</h1>
</div>
<div class="form">
<button class="add-book-button">Add new book</button>
<div id="add-book-form" style="display:none">
<form id="add-book">
<label for="Title">Title:</label>
<input type="text" id="Title" name="Title" />
<label for="Author">Author:</label>
<input type="text" id="Author" name="Author" />
<label for="Pages">Pages:</label>
<input type="number" id="Pages" name="Pages" />
<div class="is-read"><label for="Read">Have you read it?</label>
<input class="checkbox" type="checkbox" id="Read" name="Read" />
</div>
</form>
<button type="submit" class="submit-button">Submit to library</button>
<button type="reset" class="reset-button">Reset</button>
</div>
</div>
<div class="books"></div>
</div>
</body>
