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

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 >
  <h1>My Library</h1>
</div>
<div >
  <button id="addBook" button onclick="openForm"><h2>Add Book</h2></button>
</div>

<!-----Form information----->
<div >
  <form action="example.com/path"  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>

CodePudding user response：

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 >
  <h1>My Library</h1>
</div>
<div >
  <button id="addBook"><h2>Add Book</h2></button>
</div>

<!-----Form information----->
<div  id="popUpForm">
  <form action="example.com/path" >
    <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>

CodePudding user response：

const popUpForm = document.querySelector(".form-popup");
const button = document.querySelector("#addBook");

button.addEventListener("click", () => {
  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 >
  <h1>My Library</h1>
</div>
<div >
  <button id="addBook"><h2>Add Book</h2></button>
</div>

<!-----Form information----->
<div >
  <form action="example.com/path"  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>