我正在尝试创建一个库，并添加输入到我的表单中的信息(表单在弹出窗口中(，以显示在我的网格中的div(bookCard(中。我能够为提交按钮创建一个eventListener，并显示我的div(bookCard(。然而，我无法在bookCarddiv上显示表单中的输入。我如何添加到该功能中，使输入在输入时显示在那里？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;
}
JS-
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();
});
看看这个，它应该会有所帮助。
祝好运
<!-- https://codepen.io/bradtraversy/pen/OrmKWZ -->
或
<!-- https://codepen.io/fun/pen/PPVwBY -->
这是一个正在进行的、未完成的答案。出于调查目的，问题中的代码已进入实时模式。任何读者都可以尝试编辑/运行以获得解决方案。
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>