Library - adding books - HTM, CSS, JavaScript

user_17654468 0
Viewed 659

I didn't find a reply so I'm creating a new post. I'm a newbie into JS and I'd like to create a kind of library. Explanation: We have a form with input "user" and "author" and "category" Button - to submit form. I'd like to display data from my form under it (like on the attached screenshot).

My problem is that I don't especially know how to display new data from the form (please take a look at code). I'm certainly sure that I should kind of a loop to create and display new UL with nested LI but I don't know how :/.

<!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>Document</title>
</head>
<body>
    <form action="">
        <label for="title"></label>
        <input type="text" name="title" id="title">
        <label for="author"></label>
        <input type="text" name="author" id="author">
        <label for="category"></label>
        <select name="category" id="category">
            <option value="fantasy">Fantasy</option>
            <option value="sci-fi">Sci-Fi</option>
            <option value="romans">Romans</option>
        </select>
        <button type="submit" id="submit">Zatwierdź</button>
    </form>
    
    <script src="script.js"></script>
</body>
</html>

class Book {
    constructor(title,author,category) {
        this.title = title;
        this.author = author;
        this.category = category;
    }
}

let btn = document.getElementById('submit');

let books = [];

function submitForm(event) {
    event.preventDefault();
    
    let title = document.getElementById('title').value;
    let author = document.getElementById('author').value;
    let category = document.getElementById('category').value;

    let book = new Book(title,author,category);

    books.push(book);

    let elementUl = document.createElement('ul');

    function addElement() {
        
        let elementTitle = document.createElement('li');
        let elementAuthor = document.createElement('li');
        let elementCategory = document.createElement('li');
    
        let titleContent = document.createTextNode("Title: " + books[0].title);
        let authorContent = document.createTextNode("Author: " + books[0].author);
        let categoryContent = document.createTextNode("Category: " + books[0].category);
           
        elementTitle.appendChild(titleContent);
        elementAuthor.appendChild(authorContent);
        elementCategory.appendChild(categoryContent);
    
        elementUl.appendChild(elementTitle);
        elementUl.appendChild(elementAuthor);
        elementUl.appendChild(elementCategory);
    
        document.querySelector('body').appendChild(elementUl);
    }  

    addElement();
      
}

btn.addEventListener('click',submitForm);
javascript-objects onclick list arrays javascript
1 Answers

You create the book element just fine, but in the lines:

let titleContent = document.createTextNode("Title: " + books[0].title);
let authorContent = document.createTextNode("Author: " + books[0].author);
let categoryContent = document.createTextNode("Category: " + books[0].category);

you keep inserting the first book.

Moreover, you keep creating a new ul each time you add a new li element and you add all your book's attributes to different list elements.

So, you need to refactor your code to add all book information into one list element and then add it to list.

Firstly, you need to create a ul element with id book-list right after your form element, in your HTML.

And then you need to change your code by getting the ul element outside of your addElement function and use it to add a new book element:

class Book {
    constructor(title,author,category) {
        this.title = title;
        this.author = author;
        this.category = category;
    }
}

let btn = document.getElementById('submit');
let elementUl = document.getElementById('book-list');

let books = [];

function addElement(book) {
    
    // Convert these elements to p, in order to hold your book info.    
    let elementTitle = document.createElement('p');
    let elementAuthor = document.createElement('p');
    let elementCategory = document.createElement('p');
    
    // The list element that will hold all book info.
    let bookElement = document.createElement('li');

    let titleContent = document.createTextNode("Title: " + book.title);
    let authorContent = document.createTextNode("Author: " + book.author);
    let categoryContent = document.createTextNode("Category: " + book.category);

    elementTitle.appendChild(titleContent);
    elementAuthor.appendChild(authorContent);
    elementCategory.appendChild(categoryContent);
    
    // Add all book info to list element.
    bookElement.appendChild(elementTitle);
    bookElement.appendChild(elementAuthor);
    bookElement.appendChild(elementCategory);
    
    // Add list element to list.
    elementUl.appendChild(bookElement);
}

function submitForm(event) {
    event.preventDefault();
    
    let title = document.getElementById('title').value;
    let author = document.getElementById('author').value;
    let category = document.getElementById('category').value;

    let book = new Book(title,author,category);

    books.push(book);     

    addElement(book);
      
}

btn.addEventListener('click',submitForm);
user_87102650
Related