Styling/executing dynamically created buttons

Question

I'm working on a library project, where a user can 'add' a book to the library(html table) with the title of the book, the author and the amount of pages. I've also used js to add 2 buttons into the table to mark whether the book has been read, and an option to remove the book from the library.

The buttons are appended when the user clicks 'Add Book', so I've given each button a unique id with Date.now(), but now I'm not sure how to access the buttons with css.

I'm not sure if people share repl's on this but I can if that would make it easier, and I'm fairly new to js so any help would be greatly appreciated!

function addBook() {
  document.querySelector('#addbook').addEventListener("click", () => {

    // First, hijack our original buttons...
    const readButton = document.querySelector('#readed').cloneNode(true);
    const removeButton = document.querySelector('#remove').cloneNode(true);

    //  then create a fake id for this book. This 
    //  particular value is simply the ms since
    //  01/01/1970 00:00:00.000

    const bookId = Date.now();

    // And lastly, we can use that value, which we've 
    // tied to the book itself, to update these buttons

    readButton.id = `${readButton.id}_${bookId}`;
    removeButton.id = `${removeButton.id}_${bookId}`;

Answer 1

I'm not entirely sure what your question is, but if it is regarding how to change the styling of the dynamically created buttons, here is a couple of ways:

Please read this for more details: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Using the.style property on a node you can add inline styles, like changing a color or background. You can simply do:

readButton.style.cssText = "color: blue; border: 1px solid black";

or if you want to change just one attribute without touching the rest:

readButton.style.color = "blue";

Did that help? If not, let me know and I'll update the answer.

Answer 2

If you want consistent styling try using a class:

function addBook() {
document.querySelector('#addbook').addEventListener("click", () => {

// First, hijack our original buttons...
const readButton = document.querySelector('#readed').cloneNode(true);
const removeButton = document.querySelector('#remove').cloneNode(true);

// add classes 
readButton.classList.add('readBtn');
removeButton.classList.add('removeBtn');

//  then create a fake id for this book. This 
//  particular value is simply the ms since
//  01/01/1970 00:00:00.000

const bookId = Date.now();

// And lastly, we can use that value, which we've 
// tied to the book itself, to update these buttons

readButton.id = `${readButton.id}_${bookId}`;
removeButton.id = `${removeButton.id}_${bookId}`;

And style the css accordingly:

.readBtn {
  background-color: blue;
  etc...
 }

.removeBtn {
  background-color: red;
  etc...
 }