如何在div中顯示表單中的值-有解無憂

我正在嘗試創建一個庫并添加輸入到我的表單中的資訊（表單在彈出視窗中）以顯示在我的網格中的 div（bookCard）中。我能夠為提交按鈕創建一個 eventListener 并使我的 div (bookCard) 出現。但是，我無法在 bookCard div 上顯示表單中的輸入。如何添加到函式以使輸入在輸入時出現并顯示在那里？addBookToLibrary 函式中是否缺少某些內容？

預先感謝您的幫助。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!----GitHub icon-->
  <script
  src="https://kit.fontawesome.com/4c536a6bd5.js"
  crossorigin="anonymous"></script>
    <!----------Font Below ---------------->
    <link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
    <link rel="stylesheet" href="styles.css">
   <link rel="icon" type="image/png" href="images/open-book.png"/>
    <title>My Library</title>
</head>
<body>

  <div class="head-box">
    <h1>My Library</h1>
  </div>
<main class ="main-container">
  <div class="body-box">
    <button id="addBook">Add Book</button>
  </div>
<div class="books-grid" id="booksGrid">
  <div class="library-container" id="library-container"></div>
</div>
</main>
  <!-----Form information----->
  <div class="form-popup">
    <div class="form-content"
    <form action="example.com/path" class="form-container" id="popUpForm">
      <h3>add new book</h3>
      <input class="input" type="text" id="title" placeholder="Title" required maxlength="100">
      <input type="author" id="author" placeholder="Author" required maxlength="100">
      <input type="number" id="pages" placeholder="Pages" required max="10000">
    <div class="isRead">
      <label for="readOption">Have you read it?</label> 
      <input type="checkbox" id="readOption" name="readOption">
    </div>
      <button class="btn submit" type="submit" id="submit">Submit</button>
    </form>
  </div>
  </div>

  <div id="overlay"></div>
  <div id="invisibleDiv"></div>
 </body>
</html>

CSS

/*CSS RESET*/
* {
  margin:0;
  padding:0;
}


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;
  align-items: center;
  justify-content: center;
  height: 20vh;
  border-bottom: 2px solid #e0f3ff;
}

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

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

button {
  height: 10vh;
  width: 20vh;
  min-width: 20vh;
  min-height: 10vh;
  font-size: 3vh;
  background-color: #27476E;
  border-radius: 22px;
  border-style: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  color:#ffffff;
}

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

body {
  min-height: 100vh;
  background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}

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

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

.form-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}

.form-content {
  text-align: center;
  border-radius: 20px;
  width: 30vh; 
  height: auto;
  border: 3px solid #001D4A;
  padding: 20px;
  background-color: #9DD1F1;
  gap: 10px;
}

.form-container {
  min-width: 20vh;
  min-height: 50vh;
}

.isRead{
  display: flex;
  height: 30px;
  width: 100%;
  margin: 2px;
  align-items: center;
  justify-content: center;
}

label {
  font-family: poppins, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.5vh;
}

input {
  border-radius: 10px;
  height: 50px;
  margin: 3px;
  width: 100%;
  padding: 4px;
  background-color: #d0edff;
  border: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-size: 2.5vh;
}

#submit {
  margin-top: 4px;
  height: 20px;
  width: 100%;
  border-radius: 15px;
  color: #ffffff;
  border: none;
}

input[type=checkbox] {
    width: 20px;
    margin: 10px;
}

#invisibleDiv {
  position: fixed;
  height: 100%;
  width: 100%;
}

#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* BOOK CARD */

#library-container {
  display: none;
  height: 50vh;
  width: 50vh;
  border-radius: 15px;
  border: 5px solid #ffffff;
  background-color: #d0edff;
  flex-direction: column;
  justify-content: space-between;
  margin: 28px;
}

class book {
  constructor(title, author, pages, read) {
      this.title = form.title.value;
      this.author = form.author.value;
      this.pages = form.pages.value   'pages';
      this.read = form.read.checked;
  }
  }
  
  //creates book from Book Constructor, adds to library
  let myLibrary = [];
  
  function addBookToLibrary(book) {
      const bookTitle = document.getElementById('title').value;          
      const bookAuthor = document.getElementById('author').value;
      const bookPages = document.getElementById('pages').value;

  }
  
  

  // User interface //
  const popUpForm = document.querySelector('.form-popup');
  const button = document.getElementById('addBook');
  const overlay = document.getElementById('overlay');
  const booksGrid = document.getElementById('booksGrid');
  const bookCard = document.querySelector('.library-container');
  const form = document.querySelector('.form-container');
  const submitBtn = document.getElementById('submit');
  
  // Form Pop Up function //
  document.getElementById('invisibleDiv').onclick = function()
  {
     popUpForm.style.display = "none"; 
     overlay.style.display = "none";
  };
  
  button.addEventListener("click", () => {
    popUpForm.style.display = "block";
    overlay.style.display = "block";
  });
  
  
  // Submit Button Event Listener (displays bookCard) //
  
  submitBtn.addEventListener("click", () => { 
    bookCard.style.display = "block";
    popUpForm.style.display = "none";
    overlay.style.display = "none";
    addBookToLibrary();
  });

uj5u.com熱心網友回復：

看看這個，應該有幫助。

祝你好運

<!-- https://codepen.io/bradtraversy/pen/OrmKWZ -->

或者

<!-- https://codepen.io/fun/pen/PPVwBY -->

uj5u.com熱心網友回復：

這是一個持續的、未完成的答案。出于調查目的，問題中的代碼已進入實時模式。任何讀者都可以嘗試編輯/運行以獲得解決方案。

class book {
  constructor(title, author, pages, read) {
      this.title = form.title.value;
      this.author = form.author.value;
      this.pages = form.pages.value   'pages';
      this.read = form.read.checked;
  }
  }
  
  //creates book from Book Constructor, adds to library
  let myLibrary = [];
  
  function addBookToLibrary(book) {
      const bookTitle = document.getElementById('title').value;          
      const bookAuthor = document.getElementById('author').value;
      const bookPages = document.getElementById('pages').value;

  }
  
  

  // User interface //
  const popUpForm = document.querySelector('.form-popup');
  const button = document.getElementById('addBook');
  const overlay = document.getElementById('overlay');
  const booksGrid = document.getElementById('booksGrid');
  const bookCard = document.querySelector('.library-container');
  const form = document.querySelector('.form-container');
  const submitBtn = document.getElementById('submit');
  
  // Form Pop Up function //
  document.getElementById('invisibleDiv').onclick = function()
  {
     popUpForm.style.display = "none"; 
     overlay.style.display = "none";
  };
  
  button.addEventListener("click", () => {
    popUpForm.style.display = "block";
    overlay.style.display = "block";
  });
  
  
  // Submit Button Event Listener (displays bookCard) //
  
  submitBtn.addEventListener("click", () => { 
    bookCard.style.display = "block";
    popUpForm.style.display = "none";
    overlay.style.display = "none";
    addBookToLibrary();
  });

  /*CSS RESET*/
* {
  margin:0;
  padding:0;
}


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;
  align-items: center;
  justify-content: center;
  height: 20vh;
  border-bottom: 2px solid #e0f3ff;
}

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

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

button {
  height: 10vh;
  width: 20vh;
  min-width: 20vh;
  min-height: 10vh;
  font-size: 3vh;
  background-color: #27476E;
  border-radius: 22px;
  border-style: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  color:#ffffff;
}

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

body {
  min-height: 100vh;
  background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}

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

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

.form-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}

.form-content {
  text-align: center;
  border-radius: 20px;
  width: 30vh; 
  height: auto;
  border: 3px solid #001D4A;
  padding: 20px;
  background-color: #9DD1F1;
  gap: 10px;
}

.form-container {
  min-width: 20vh;
  min-height: 50vh;
}

.isRead{
  display: flex;
  height: 30px;
  width: 100%;
  margin: 2px;
  align-items: center;
  justify-content: center;
}

label {
  font-family: poppins, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.5vh;
}

input {
  border-radius: 10px;
  height: 50px;
  margin: 3px;
  width: 100%;
  padding: 4px;
  background-color: #d0edff;
  border: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-size: 2.5vh;
}

#submit {
  margin-top: 4px;
  height: 20px;
  width: 100%;
  border-radius: 15px;
  color: #ffffff;
  border: none;
}

input[type=checkbox] {
    width: 20px;
    margin: 10px;
}

#invisibleDiv {
  position: fixed;
  height: 100%;
  width: 100%;
}

#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* BOOK CARD */

#library-container {
  display: none;
  height: 50vh;
  width: 50vh;
  border-radius: 15px;
  border: 5px solid #ffffff;
  background-color: #d0edff;
  flex-direction: column;
  justify-content: space-between;
  margin: 28px;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!----GitHub icon-->
  <script
  src="https://kit.fontawesome.com/4c536a6bd5.js"
  crossorigin="anonymous"></script>
    <!----------Font Below ---------------->
    <link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
    <link rel="stylesheet" href="styles.css">
   <link rel="icon" type="image/png" href="images/open-book.png"/>
    <title>My Library</title>
</head>
<body>

  <div class="head-box">
    <h1>My Library</h1>
  </div>
<main class ="main-container">
  <div class="body-box">
    <button id="addBook">Add Book</button>
  </div>
<div class="books-grid" id="booksGrid">
  <div class="library-container" id="library-container"></div>
</div>
</main>
  <!-----Form information----->
  <div class="form-popup">
    <div class="form-content"
    <form action="example.com/path" class="form-container" id="popUpForm">
      <h3>add new book</h3>
      <input class="input" type="text" id="title" placeholder="Title" required maxlength="100">
      <input type="author" id="author" placeholder="Author" required maxlength="100">
      <input type="number" id="pages" placeholder="Pages" required max="10000">
    <div class="isRead">
      <label for="readOption">Have you read it?</label> 
      <input type="checkbox" id="readOption" name="readOption">
    </div>
      <button class="btn submit" type="submit" id="submit">Submit</button>
    </form>
  </div>
  </div>

  <div id="overlay"></div>
  <div id="invisibleDiv"></div>
 </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/529279.html

標籤：javascripthtmlcss形式输入

上一篇：HTML表單單選條件

下一篇：在PHP/HTML中自動填充表單值