單擊按鈕后如何使表單出現？

我試圖在單擊按鈕后顯示一個表單，我相信我已經在下面的 JavaScript 代碼中定義了按鈕和表單，我一直試圖單擊按鈕使其顯示，但它不起作用，我是什么在這里失蹤？我還想添加一個功能，使添加內容時表單消失。（這是奧丁專案的圖書館專案）

提前感謝您的時間和幫助。

//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>

uj5u.com熱心網友回復：

• 通過添加缺少的結束括號來修復語法錯誤)。
• onclick從addBook按鈕中洗掉了行內處理程式。
• 洗掉了不必要的事件處理程式引數openForm。
• 將 移至id="popUpForm"表單的父 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>

uj5u.com熱心網友回復：

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 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">
  <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>

標籤：javascripthtmlcss功能添加事件监听器

上一篇：PythonTkinter：如何遍歷串列并在新根中的新行上顯示專案

下一篇：替換熊貓資料框列中的字串