I am working on a website in which you can add items to a list of books you want to read and then press a button to review it. You can also press a different button to delete the item. Things were working fine until I got to adding the aforementioned buttons. Once I started adding the code for them, the items that would previously be added to the webpage weren't showing up. I am using createElement() and appendChild() methods. I was hoping for the buttons to be appended next to the other text that I put on the h2. But now nothing shows up at all. I've tried to reorder the code and I've checked the variables multiple times, but I can't find the source of the issue at all. I would appreciate any help in finding this reason.
I'm using replit.com
// listens for a click on the "add new" button
document.getElementById("new").addEventListener("click", newBook);
let newdiv = document.getElementById("newdiv");
// takes information about a new list item
function newBook() {
// reveals the input boxes needed
newdiv.style.display = "inline-block";
}
// listens for a click on the "add" button
document.getElementById("enternew").addEventListener("click", addItem);
// creates a new list item and adds it to the body of the webpage
function addItem() {
// defines the new element as an h2 element
let item = document.createElement("h2");
// gets the variable values from the user's input
let bookname = document.getElementById("book").value;
let authorname = document.getElementById("author").value;
let seriesname = document.getElementById("series").value;
// converts the user's input into text nodes
let b = document.createTextNode(bookname);
let a = document.createTextNode(", by " + authorname);
let s = document.createTextNode(" (" + seriesname + ")");
// creates buttons to initiate the review process and remove the list item
let review = document.createElement("button");
let remove = document.createElement("button");
// creates a text node for the review button and appends it to the button element
let rv = document.createTextNode("REVIEW");
review.appendChild(rv);
// creates a text node for the remove button and appends it to the button element
let rm = document.createTextNode("✖");
remove.appendChild(rm);
// appends the text nodes to the h2 element
item.appendChild(b);
item.appendChild(a);
item.appendChild(s);
// appends the buttons to the h2 element
item.appendChild("review");
item.appendChild("remove");
// adds the h2 element, including all the text nodes, to the body of the webpage
document.body.appendChild(item);
review.onclick = function() {
alert("test");
}
remove.onclick = function() {
alert("test 2");
}
}html {
height: 100%;
width: 100%;
background-color: #D2AB8B;
}
.header {
font-family: "Cutive Mono";
font-size: 50px;
width: 100%;
border-bottom-style: dashed;
border-bottom-width: 4px;
padding-bottom: 30px;
color: #413013;
}
p {
font-family: "EB Garamond";
font-size: 18px;
color: #413013;
}
.df {
border-width: 0px;
font-size: 20px;
font-family: "EB Garamond";
background-color: #FFF6E3;
color: #413013;
}
button:hover {
background-color: #ACD9DC;
border-width: 0px;
}
#newdiv {
display: none;
}
input {
font-size: 20px;
font-family: "Cutive Mono";
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Reading List</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=EB Garamond">
</head>
<body>
<center>
<!-- page header -->
<h1 class="header">~ YOUR READING LIST ~</h1>
<br/> <br/>
<!-- add new section for new book entry -->
<button class="df" id="new">ADD NEW +</button>
<br/>
<!-- hidden division that contains input fields to add a new entry -->
<div id="newdiv">
<p>Book name:</p>
<input id="book" />
<br/>
<p>Author name:</p>
<input id="author" />
<br/>
<p>Series name (optional):</p>
<input id="series" />
<br/> <br/>
<button class="df" id="enternew">ADD</button>
</div>
</center>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge-v2.js" theme="teal" position="bottom-right"></script>
</body>
</html>
Look at the console.
"Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."You're trying to append strings when you meant to do this