How do I make a form appear after clicking a button?

Question

I am trying to make a form appear after clicking a button, I believe I have defined the button and the form in my JavaScript code below, I keep trying to click on the button to make it appear but it is not working, what am I missing here? I would also like to add a function to make the form disappear when adding something. (This is for the Library project for The Odin Project)

Thanks in advance for your time and help.

//define button and form//
const popUpForm = document.getElementById("popUpForm");
var button = document.getElementById("addBook");
//Form Pop-Up//
//button.onclick = () => {window.open('hello!')};//

//button function//
button.addEventListener("click", function(openForm) {
  document.getElementById("popUpForm").style.display = "block";
};

h1 {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 8vh;
  color: #001D4A;
}

.head-box {
  background-color: #9DD1F1;
  display: flex;
  justify-content: center;
}

h2 {
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 3vh;
  color: #c2e8ff;
}

button {
  height: 10vh;
  width: 20vh;
  font-size: 3vh;
  background-color: #27476E;
  border-radius: 22px;
  border-color: #daf1ff;
  border-width: 2px;
  border-style: solid;
}

button:hover {
  background-color: #192c44;
}

body {
  background-color: #9DD1F1;
}

.body-box {
  display: flex;
  justify-content: center;
}


/* The pop up form - hidden by default */

.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

.form-container {
  display: block;
  max-width: 300px;
  padding: 10px;
}

<div class="head-box">
  <h1>My Library</h1>
</div>
<div class="body-box">
  <button id="addBook" button onclick="openForm"><h2>Add Book</h2></button>
</div>

<!-----Form information----->
<div class="form-popup">
  <form action="example.com/path" class="form-container" id="popUpForm">
    <input type="text" id="title" placeholder="Title">
    <input type="author" id="author" placeholder="Author">
    <input type="pages" id="pages" placeholder="Pages">
    <input type="checkbox" id="readOption" name="readOption">
    <label for="readOption">Have you read it?</label>
    <button type="submit">Submit</button>
  </form>
</div>

Answer 1

• Fixed syntax error by adding missing closing paren ).
• Removed the inline onclick handler from the addBook button.
• Removed the unnecessary event handler param openForm.
• Moved the id="popUpForm" to the form's parent div.

//define button and form//
const popUpForm = document.getElementById("popUpForm");
var button = document.getElementById("addBook");
//Form Pop-Up//
//button.onclick = () => {window.open('hello!')};//

//button function//
button.addEventListener("click", function() {
  document.getElementById("popUpForm").style.display = "block";
 
});

h1 {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 8vh;
  color: #001D4A;
}

.head-box {
  background-color: #9DD1F1;
  display: flex;
  justify-content: center;
}

h2 {
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 3vh;
  color: #c2e8ff;
}

button {
  height: 10vh;
  width: 20vh;
  font-size: 3vh;
  background-color: #27476E;
  border-radius: 22px;
  border-color: #daf1ff;
  border-width: 2px;
  border-style: solid;
}

button:hover {
  background-color: #192c44;
}

body {
  background-color: #9DD1F1;
}

.body-box {
  display: flex;
  justify-content: center;
}


/* The pop up form - hidden by default */

.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

.form-container {
  display: block;
  max-width: 300px;
  padding: 10px;
}

<div class="head-box">
  <h1>My Library</h1>
</div>
<div class="body-box">
  <button id="addBook"><h2>Add Book</h2></button>
</div>

<!-----Form information----->
<div class="form-popup" id="popUpForm">
  <form action="example.com/path" class="form-container">
    <input type="text" id="title" placeholder="Title">
    <input type="author" id="author" placeholder="Author">
    <input type="pages" id="pages" placeholder="Pages">
    <input type="checkbox" id="readOption" name="readOption">
    <label for="readOption">Have you read it?</label>
    <button type="submit">Submit</button>
  </form>
</div>